原始ajax通过xmlHttpRequest对象的send()方法提交数据--Get方式和Post方式

╰+攻爆jí腚メ 2023-10-10 12:03 4阅读 0赞

**//Get方式提交：**  
xmlhttp.open("GET","testServlet?name="+userName,true);  
xmlhttp.send(null);

**//Post方式请求的代码**  
xmlhttp.open("POST","testServlet",true);  
//POST方式需要自己设置http的请求头  
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
//POST方式发送数据  
xmlhttp.send("name="+userName);  
  
**//用户名校验的方法**  
//这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互  
var xmlhttp;

function verify()\{  
**//1.使用dom的方式获取文本框中的值**  
//document.getElementBuId("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果<input>  
//.value可以获取一个元素节点的value属性值  
var userName = document.getElementById("userName").value;

**//2.创建XMLHttpRequest对象**  
//这是XMLHttpRequest兑现使用中最为复杂的一步  
//需要这对IE和其他类型浏览器建立这个对象的不方式写不同的代码  
if(window.XMLHttpRequest)\{  
//针对FireFox,Mozillar,opera,safari,IE7,IE8  
xmlhttp = new XMLHttpRequest();  
//针对某些特定版本的mozillar浏览器的bug修正  
if(xmlhttp.overrideMimeType)\{  
xmlhttp.overrideMimeType("text/xml")  
\}  
\}else if(window.ActiveXObject)\{  
//针对IE5,IE5.5,IE6(IE7,IE8)  
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js数组中  
//排在前面的版本较新  
var activexName =\["MSXML2.XMLHTTP","Microsoft.XMLHTTP"\];  
for(var i=0;i<activexName.length;i++)\{  
try\{  
//取出一个控件名进行创建，如果创建成功就终止循环  
//如果创建失败，抛出异常，然后继续循环，继续尝试创建  
xmlhttp = new ActiveXObject(activexName\[i\]);  
break;  
\} catch(e)\{  
\}  
\}  
\}  
// 确认XMLHttpRequest对象创建成功  
// if(!xmlhttp)\{  
// alert("XMLHttpRequest对象创建失败！");  
// return;  
// \}else\{  
// //alert(xmlhttp);  
// alert(xmlhttp.readyState);  
// \}

//2 注册回调函数  
//注册回调函数时只需要函数名不要加括号  
//我们需要注册的是函数名称，如果加上括号，就把函数的返回值给注册上了，这是错误的  
xmlhttp.onreadystatechange = callback;

**//3设置连接信息**  
//第一个参数表示http的请求方式。支持所有http的请求方式。主要使用get和post  
//第二个参数表示请求的url地址，get方式的参数也在url中  
//第三个参数表示采用异步还是同步方式交互，true表示异步  
//GET方式请求的代码  
xmlhttp.open("GET","testServlet?name="+userName,true);

**//4 发送数据，开始和服务器端进行交互**  
//同步方式下，send这句话会在服务器设置回来后才执行完  
//异步方式，send这句话执行晚会立即完成

//GET方式  
xmlhttp.send(null);  
\}

//回调函数  
function callback()\{  
// alert(xmlhttp.readyState);  
**//5接收响应数据**  
//判断对象的状态是交互完成  
if(xmlhttp.readyState==4)\{  
//判断http的交互是否成功、  
if(xmlhttp.status==200)\{  
//获取服务器端返回的数据  
//获取服务器端输出的纯文本数据  
var responseText = xmlhttp.responseText;  
//将数据显示在页面上  
//通过dom方式找到div标签所对应的元素节点  
var divNode = document.getElementById("result");  
//设置元素节点中的html内容  
divNode.innerHTML=responseText;  
\}else  
\{  
alert("出错了");  
\}  
\}  
\}