关于Ajax的实现-阿里云开发者社区

关于Ajax的实现

2017-11-20 1015

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

AJAX:Asynchronous Javascript And XML.异步的JavaScript和XML.

同步请求:

异步请求:

1.1.1 XMLHttpRequest对象的介绍:

方法:

* open(请求方式,请求路径,是否异步);

* send(发送的数据);

* setRequestHeader(“头信息”,”头信息的值”);

属性:

* onreadystatechange:监听对象的状态的改变.

* readyState :对象状态.

　　* 0 :对象没有初始化

　　* 1 :读取中

　　* 2 :已经读取

　　* 3 :交互中

　　* 4 :完成

* responseText :响应文本.

* responseXML :响应XML.

* status :服务器响应状态码.

1.1.2 AJAX入门案例:

* AJAX开发流程:

　　* 1.创建XMLHttpRequest对象.

　　* 2.设置对象改变触发的一个函数.（回调函数）onreadystatechange=function(){}

　　* 3.设置请求路径.open();

　　* 4.发送数据.send();

创建XMLHttpRequest:

 1 // 创建一个XmlHttpRequest对象
 2 function createXmlHttpRequest(){
 3     var xmlHttp;
 4     try { //Firefox, Opera 8.0+, Safari
 5         xmlHttp = new XMLHttpRequest();
 6     }catch (e) {
 7         try { //Internet Explorer
 8             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 9         } 
10         catch (e) {
11             try {
12                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
13             } 
14             catch (e) {
15             }
16         }
17     }
18     return xmlHttp;
19 }

编写AJAX的流程的代码:(GET请求,提交了参数)

 1 function visit(){
 2     //1.创建XMLHttpRequest对象
 3     var xhr = createXmlHttpRequest();
 4     //2.设置对象状态改变触发的函数
 5     xhr.onreadystatechange = function(){
 6         // 判断如果对象的状态为4.
 7         if(xhr.readyState == 4){
 8             // 判断状态码为200 成功的时候.
 9             if(xhr.status == 200){
10                 // 获得响应文本
11                 var data = xhr.responseText;
12                 // 获得div
13                 document.getElementById("div1").innerHTML = data;
14             }
15         }
16     };
17     //3.打开异步请求
18     xhr.open("GET","/day23/demo1?"+new Date().getTime()+"&id=3&name=aa",true);
19     //3.发送数据
20     // send发送数据是POST的
21     xhr.send(null);
22 }