Ajax的使用

1.Ajax的基本步骤

 1 
 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 })()