原生JS操作AJAX
1,get方式的AJAX
1 function sendAjaxReq() 2 { 3 //1,创建ajax引擎 XMLHttpRequest对象 4 var req = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP"); 5 //2,打开一个请求,此时未发送请求,定义好发送请求的方式以及是否需要携带数据 是否同步异步 6 req.open("get", "testAjax?phone=iphone&apple=pen"); 7 //3,准备好处理服务器返回的数据 8 req.onreadystatechange = function() 9 { 10 if(req.readyState == 4) 11 { 12 //返回json数据的解析格式 13 var str = req.responseText; 14 eval("var obj=" + str); 15 alert(obj.name); 16 //返回xml的解析格式 17 var data = req.reponseXML.getElementsByTagName("bigName")[0].first(child.data); 18 } 19 } 20 //4,发送请求,如果是在火狐下,使用get方式发送ajax请求,send的时候括号写上null 21 req.send(null); 22 }
2,post方式AJAX
1 //使用post传参,需要携带一个请求头模拟表单提交 2 function sendAjax() 3 { 4 var request = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP"); 5 request.open("post", "testAjax?phone=1", true) 6 request.onreadystatechange = function() 7 { 8 if(request.readyState == 4) 9 { 10 if(request.status == 200) 11 { 12 var str = request.responseText; 13 alert(str); 14 } 15 else if(request.status == 404) 16 { 17 alert("找不到资源"); 18 } 19 } 20 } 21 request.setRequestHeader("content-type", "application/x-www-form-urlencoded") 22 request.send("phone="); 23 }
3,封装了get和post的AJAX
1 function sendAjaxReq(method,url,param,fun200,fun404,fun500) 2 { 3 var req; 4 if(window.XMLHttpRequest) 5 { 6 req = new XMLHttpRequest(); 7 } 8 else if(window.ActiveXObject) 9 { 10 req = new ActiveXObject("Msxml2.XMLHTTP"); 11 } 12 req.open(method,url); 13 req.onreadystatechange = function() 14 { 15 if(req.readyState == 4) 16 { 17 if(req.status == 200) 18 { 19 if(fun200) 20 { 21 fun200(req.responseText); 22 } 23 } 24 else if(req.status == 404) 25 { 26 if(fun404) 27 { 28 fun404(); 29 } 30 } 31 else if(req.status == 500) 32 { 33 if(fun500) 34 { 35 fun500(); 36 } 37 } 38 } 39 } 40 if(method.toUpperCase() == "GET") 41 { 42 req.send(null); 43 } 44 else if(method.toUpperCase() == "POST") 45 { 46 req.setRequestHeader("context-type", "application/x-www-form-urlencoded"); 47 req.send(param); 48 } 49 } 50 51 function testAjax() 52 { 53 sendAjaxReq("get","ajaxServlet?uname=1&password=2",null,function(data) 54 { 55 eval("var obj="+data); 56 alert(obj.data); 57 }); 58 }