Ajax的使用
1.Ajax的基本步骤
1 <!-- 创建XHR异步请求对象-->
2 var xhr = new XMLHttpRequest();
3 <!-- 注册事件监听-->
4 xhr.onreadystatechange = function(){
5 if(xhr.readyState==4&&xhr.status==200){
6 console.log(xhr.responseText);
7 }
8 }
9 <!-- 建立与服务端的连接-->
10 xhr.open("GET","https://www.baidu.com",true);
11 <!-- 发送请求-->
12 xhr.send(null);
readyState为状态说明
0:未初始化，尚未调用open()方法
1:启动，已经调用open()方法，但尚未调用send()方法
2:发送，已经调用send方法，但尚未接收响应
3:接收，已经接收到部分响应
4:完成，已经接收到全部响应数据，而且已经可以在客户端使用了
xhr.status==200表示服务端响应结果ok
xhr.send表示发送请求，当请求方式为get方式时，send方法内部传null
2.Ajax的使用
1 <div id="result"></div> 2 <button onclick="doAjaxGetRequest()">ajax GET 点击</button>
1 function doAjaxGetRequest() { 2 url = "/ajax/doAjaxGetRequest"; 3 param = "key=A"; 4 doAjaxGet(url, param, function(result) { 5 var div = document.getElementById("result"); 6 div.innerHTML = result; 7 }); 8 } 9 function doAjaxGet(url, param, callback) { 10 //1.创建异步请求对象XHR 11 var xhr = new XMLHttpRequest(); 12 //2.设置监听状态 13 xhr.onreadystatechange = function() { 14 if (xhr.readyState == 4 && xhr.status == 200) { 15 callback(xhr.responseText); 16 } 17 } 18 //3.建立连接 19 xhr.open("GET", url + "?" + param, true); 20 //4.发送请求 21 xhr.send(); 22 }
doAjaxGetRequest()方法调用doAjaxGet()方法，并进行传参操作，将url,param,function(result){}传给doAjaxGet方法中的url,param,callback
doAjaxGet方法中的callback(xhr.responseText)调用doAjaxGetRequest()方法中的function(result) {}，将result内容以html方式显示在div对象内部
3.匿名函数的使用说明
1 (function(){ 2 //定义函数 3 var point = function(x,y){ 4 this.x=x; 5 this.y=y; 6 }; 7 //每个函数内部都有一个prototype属性，基于这个属性可以指向函数添加函数 8 point.prototype={ 9 setX:function(x){this.x=x}, 10 setY:function(y){this.y=y}, 11 getX:function(){return this.x}, 12 getY:function(){return this.y} 13 } 14 //构建函数对象，并且将对象赋值给一个全局变量 15 window.pointobj=new point(10,20); 16 //()表示立刻执行匿名函数 17 })();
1 //调用对象函数，结果为10 2 pointobj.getX() 3 //结果为20 4 pointobj.getY() 5 //调用setX方法，将x赋值为100 6 pointobj.setX(100)
4. Ajax的post请求和get请求的封装
1 (function(){ 2 //定义js函数 3 var ajax = function(){} 4 //通过prototype属性向当前ajax函数内部再添加函数 5 ajax.prototype={ 6 doAjaxGet:function (url, param, callback) { 7 //创建异步请求对象 8 var xhr = new XMLHttpRequest(); 9 //设置状态监听 10 xhr.onreadystatechange = function() { 11 if (xhr.readyState == 4 && xhr.status == 200) { 12 callback(xhr.responseText); 13 } 14 } 15 //建立连接 16 xhr.open("GET", url + "?" + param, true); 17 //发送请求 18 xhr.send(); 19 }, 20 doAjaxPost:function (url, param, callback) { 21 var xhr = new XMLHttpRequest(); 22 xhr.onreadystatechange = function() { 23 if (xhr.readyState == 4 && xhr.status == 200) { 24 callback(xhr.responseText); 25 } 26 } 27 xhr.open("Post", url, true); 28 //post请求需要设置请求头 29 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 30 //post请求的请求参数要写到send方法内部 31 xhr.send(param); 32 } 33 } 34 window.Ajax=new ajax(); 35 })()
