关于Ajax的实现

简介:

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 }
复制代码

 

 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/4083845.html,如需转载请自行联系原作者

相关文章
|
前端开发
$.ajax()的实现方式
$.ajax()的实现方式
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
237 0
【jquery ajax】实现文件上传提交
|
XML JSON JavaScript
原生AJAX实现异步请求
原生AJAX实现异步请求
114 0
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
319 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
382 0
Ajax实现动态及时刷新表格数据
|
前端开发
Ajax基本案例详解之$.getjson的实现
Ajax基本案例详解之$.getjson的实现
53 0
|
前端开发
Ajax基本案例详解之$.get的实现
Ajax基本案例详解之$.get的实现
65 0
|
前端开发
Ajax基本案例详解之$.post的实现
Ajax基本案例详解之$.post的实现
73 0
|
前端开发 Java
Ajax基本案例详解之load的实现
Ajax基本案例详解之load的实现
52 0
|
前端开发
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
409 0
layui结合ajax实现下拉联动效果