Ajax的基本开发你知道吗？ajax的基本开发步骤详解（内有实例）
本篇文章主要讲述就是关于ajax的的基本开发步骤介绍，想更深入的了解ajax的开发就必须要会开发步骤，虽然是最基本的，但是也能让人知道如何用ajax开发。现在开始阅读本篇文章吧
何为ajax？有什么用？
Ajax全称是“Asynchrous（异步） Javascript And XML”，是指一种创建交互式网页应用的的网页开发技术。是一种用于提高浏览器和服务器交互效率的快速创建动态网页技术。能够替换传统传统的web交互模式。-
如何理解这个同步异步？
传统同步交互模式是怎样的？
在传统模型中，使用的是同步交互模式，客户端浏览器向服务器提出请求，然后在服务器响应这个请求之前，一直处于等待的状态，并且不能进行别的操作。
主流技术异步交互模式是怎样的？
在Ajax异步交互模式中，在客户端浏览器和服务器当中，多了一个传递对象Ajax引擎，当客户端浏览器是向Ajax引擎提交请求，然后由Ajax引擎负责和服务器进行请求信息转交，这样就能实现在客户端浏览器发送请求后，能够继续操作，而不是处于等待状态。当服务器处理完Ajax引擎请求后，将响应传递给Ajax引擎，Ajax引擎会更新客户端浏览器页面。 Ajax开发步骤
第一步：获取XMLHttpRequest对象。
在w3school的xml文档中就能查到示例代码。
var xmlhttp = null;if(window.XMLHttpRequest){ //这个是针对浏览器IE7及其7以上的版。
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){ //这个是针对浏览器5到7的版本。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步：注册回调函数。
xmlhttp.onreadystatechange = function(){
};
onreadystatechange是一个事件处理器，用于每个状态变化所触发的事件。
第三步：open(“method”,”URL”,async,”uname”,”pswd”)
只用于设置请求方式、URL路径、以及是否同步，并不发送请求。
| 参数 | 作用 |
|---|---|
| method | 发送请求的方式，可选的参数有：GET、POST和PUT。 |
| URL | 要发送的URL路径，可以使用绝对路径和相对路径。 |
| async | 请求是否要被异步处理。也可以不写，默认为true。 |
| true，脚本处理会在send()发送之后继续处理，即异步处理。 | |
| false，在继续脚本处理之前，脚本会等待某个响应，即同步处理。 | |
| uname | 目前还没用过，文档也没有说明。直接不写就行。 |
| pswd | 目前还没用过，文档也没有说明。直接不写就行。 |
如果URL要求带参数呢？
如果是get请求的话，将参数直接在url后面进行拼接。
例如：xmlhttp.open(“get”,”http://www.baidu.com?name=xiaosan“);
如果是post请求的话，则要进行多项设置操作：
例如：xmlhttp.open(“post”,”http://www.baidu.com“);
xmlhttp.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“name=xiaosan”);
其中，setRequestHeader(“label”,”value”)的作用是想要被发送的http报头添加lable/value对。
第四步：send（content）
发送请求。如果没有参数，则写成send(null)。
第五步：在回调函数中进行具体的数据操作。
在这之前要先了解XMLHttpRequest的一些属性。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 状态发生改变的时候，能触发一些事情。 |
| readyState | 详情见下表 |
| status | 数字返回状态，比如”OK”为200，”Not Found”为404等 |
| statusText | 字符串返回状态，比如”OK”,”Not Found”等 |
| responseText | 以字符串返回响应。 |
| responseXML | 以XML返回响应。返回的是一个XML对象，可以用DOM进行解析 |
下表是一个readyState的状态值以及状态值所代表的含义：
| 状态值 | 代表的状态释义 |
|---|---|
| 0 | 未初始化的状态，代表XMLHttpRequest对象被创建之前 |
| 1 | 加载中的状态，open操作。 |
| 2 | 已加载的状态，send操作。 |
| 3 | 交互的状态，接收到了响应数据，但只有响应头，正文还没别接收。 |
| 4 | 完成的状态，所有的http响应接收完成。 |
何为ajax？有什么用？
Ajax全称是“Asynchrous（异步） Javascript And XML”，是指一种创建交互式网页应用的的网页开发技术。是一种用于提高浏览器和服务器交互效率的快速创建动态网页技术。能够替换传统传统的web交互模式。-
如何理解这个同步异步？
传统同步交互模式是怎样的？
在传统模型中，使用的是同步交互模式，客户端浏览器向服务器提出请求，然后在服务器响应这个请求之前，一直处于等待的状态，并且不能进行别的操作。 （想看更多就到PHP中文网AJAX开发手册栏目中学习）
主流技术异步交互模式是怎样的？
在Ajax异步交互模式中，在客户端浏览器和服务器当中，多了一个传递对象Ajax引擎，当客户端浏览器是向Ajax引擎提交请求，然后由Ajax引擎负责和服务器进行请求信息转交，这样就能实现在客户端浏览器发送请求后，能够继续操作，而不是处于等待状态。当服务器处理完Ajax引擎请求后，将响应传递给Ajax引擎，Ajax引擎会更新客户端浏览器页面。 Ajax开发步骤
第一步：获取XMLHttpRequest对象。
在w3school的xml文档中就能查到示例代码。
var xmlhttp = null;if(window.XMLHttpRequest){ //这个是针对浏览器IE7及其7以上的版。
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){ //这个是针对浏览器5到7的版本。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步：注册回调函数。
xmlhttp.onreadystatechange = function(){
};
onreadystatechange是一个事件处理器，用于每个状态变化所触发的事件。
第三步：open(“method”,”URL”,async,”uname”,”pswd”)
只用于设置请求方式、URL路径、以及是否同步，并不发送请求。
| 参数 | 作用 |
|---|---|
| method | 发送请求的方式，可选的参数有：GET、POST和PUT。 |
| URL | 要发送的URL路径，可以使用绝对路径和相对路径。 |
| async | 请求是否要被异步处理。也可以不写，默认为true。 |
| true，脚本处理会在send()发送之后继续处理，即异步处理。 | |
| false，在继续脚本处理之前，脚本会等待某个响应，即同步处理。 | |
| uname | 目前还没用过，文档也没有说明。直接不写就行。 |
| pswd | 目前还没用过，文档也没有说明。直接不写就行。 |
如果URL要求带参数呢？
如果是get请求的话，将参数直接在url后面进行拼接。
例如：xmlhttp.open(“get”,”http://www.baidu.com?name=xiaosan“);
如果是post请求的话，则要进行多项设置操作：
例如：xmlhttp.open(“post”,”http://www.baidu.com“);
xmlhttp.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“name=xiaosan”);
其中，setRequestHeader(“label”,”value”)的作用是想要被发送的http报头添加lable/value对。
第四步：send（content）
发送请求。如果没有参数，则写成send(null)。
第五步：在回调函数中进行具体的数据操作。
在这之前要先了解XMLHttpRequest的一些属性。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 状态发生改变的时候，能触发一些事情。 |
| readyState | 详情见下表 |
| status | 数字返回状态，比如”OK”为200，”Not Found”为404等 |
| statusText | 字符串返回状态，比如”OK”,”Not Found”等 |
| responseText | 以字符串返回响应。 |
| responseXML | 以XML返回响应。返回的是一个XML对象，可以用DOM进行解析 |
下表是一个readyState的状态值以及状态值所代表的含义：
| 状态值 | 代表的状态释义 |
|---|---|
| 0 | 未初始化的状态，代表XMLHttpRequest对象被创建之前 |
| 1 | 加载中的状态，open操作。 |
| 2 | 已加载的状态，send操作。 |
| 3 | 交互的状态，接收到了响应数据，但只有响应头，正文还没别接收。 |
| 4 | 完成的状态，所有的http响应接收完成。 |
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是Ajax的基本开发你知道吗？ajax的基本开发步骤详解（内有实例）的详细内容，更多请关注其它相关文章！