Ajax
- AJAX即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
- 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部更新。
- 优点:
1.使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。
2.减轻服务器负担，按需要获得数据。
3.无刷新更新页面，减少用户的实际和心理的等待时间。
4.更好的用户体验。
5.减轻宽带的负担。
6.主流浏览器支持 - 缺点:
1.AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
2.AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
3.对搜索引擎支持不好。
XMLHttpRequest 对象
Ajax主要通过使用XMLHttpRequest对象来实现异步数据交互和通信
1.非IE浏览器和高版本的IE浏览器
var xhr = new XMLHttpRequest();
2.老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
3.兼容处理
//Ajax.js
function createAjax() {
var xhr ;
if(window.XMLHttpRequest){
//所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
xhr = new XMLHttpRequest();
}else {
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
-
XHR的用法
1.方法：
| 方法名 | 注释 |
|---|---|
| abort | 取消当前请求 |
| getAllResponseHeaders | 获取响应的所有http头 |
| open(方式get/post，url地址，同步异步 | 创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码) |
| send() | 发送请求到http服务器并接收回应 |
| setRequestHeader | 单独指定请求的某个http头，header()设置http头协议信息 |
2.属性：
| 方法名 | 注释 |
|---|---|
| onreadystatechange | 指定当readyState属性改变时的事件处理句柄。 |
| readyState | 返回当前请求的状态，ajax行进过程中不同状态 |
| responseBody | 将回应信息正文以unsigned byte数组形式返回 |
| responseStream | 以Ado Stream对象的形式返回响应信息。 |
| responseText | 将响应信息作为字符串返回.只读 |
| responseXML | 将响应信息格式化为Xml Document对象并返回，只读 |
| status | 返回当前请求的http状态码. 200 ok 304 缓存 ； 404 not found; 403 没有权限 501 服务器级别错误 |
| statusText | 返回当前请求的响应行状态文本， ok not found forbidden |
3.基本使用：
//>>1.创建Ajax引擎对象
var xmlHttpRequest= createAjax();
//>>2.设置发送请求时需要具备的数据
//>>2.1.指定请求url地址(注意还没有发出请求仅仅是设置请求地址和请求方式)
xmlHttpRequest.open('GET/POST','url地址',[ '是否异步']);
//>>2.2.监听Ajax引擎对象的改变
xmlHttpRequest.onreadystatechange=function(){
//当请求和响应同时完成,从Ajax引擎中获取响应内容,然后通过javascript对网页进行操作
if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//根据相应内容对网页进行操作的代码通常写在这里
// xmlHttpRequest. responseText
// //xmlHttpRequest. responseXML
}
}
//>>3.发送请求
xmlHttpRequest.send([post请求参数字符串])
-
HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息，XHR对象也提供了操作这两种头部信息的方法。
默认情况下，在发送XHR请求的同时还会发送下列头部：
1.Accept
2.Accept-Charset
3.Accept-Encoding
4.Accept-Language
5.Connection
6.Cookie
7.Host
8.Referer
9.User-Agent
使用setRequestHeader()方法可以设置自定义的请求头部。参数为头部字段的名称和头部字段的值。这个要在open和send之间调用才有效。
在使用这个方法时，建议使用自定义的头部名，以免与浏览器发生冲突，有的浏览器可能不允许开发人员重写默认头部。
想要获得头部的值可以使用下面这两种方法。
xhr.setRequestHeader("MyHeader", "MyValue");
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();
-
GET请求
用于向服务器查询某些信息，将参数放到后面。使用addURLParam就是保证URI被正确编码，格式良好。
var xhr = new XMLHttpRequest();
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
var url = "example.php";
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
xhr.open("get", url, true);
xhr.send(null);
-
POST请求
用于向服务器发送应该保存的数据，POST请求应该会发送很多的数据到服务器。这时send的参数就是发送的数据了。一般是数据序列化后的字符串。
var xhr = new XMLHttpRequest();
xhr.open("post", "postexample.php", true);
//模仿表单提交
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));
<?php
header("Content-type: text/plain");
echo <<<EOF
Name:{$_POST['user-name'};
Emial:{$_POST('user-email')};
EOF;
GET请求消耗的资源少，同等数据量是POST的两倍。
XMLHttpRequest 二级
-
FormData
Web应用中频繁使用的一项功能就是表单数据的序列化。为此，2级定义了FormData对象。
append方法可以向其添加数据，键值对形式
也可以直接使用表单初始化FormData：
//键值对形式
var data = new FormData();
data.append("name", "Nicholas");
//使用表单初始化FormData
var data = new FormData(document.forms[0]);
xhr.send(data);
-
超时限定
2级中又规定了一个timeout属性，表示请求在等待响应多少毫秒之后就终止。设置之后，如果超时没有接收到响应，就回触发timeout事件，调用事件处理程序，这时xhr.readyState可能已经为4了，但是此时请求已经中止了，不能再访问xhr.status，所以如果使用timeout，onreadystatechange事件处理也要小心。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
try {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
} catch (ex){
}
}
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; // IE8+
xhr.ontimeout = function(){
alert("Request did not return in a second.");
};
xhr.send(null);
-
overrideMimetype()
重写XHR响应的MIME类型，因为响应的MIME类型决定了XHR对象如何处理它。如果服务器返回的是XML文件，MIME却是text/plain，那XHR对象就不能正确的设置responseXML。
要在send之前调用这个方法。
var xhr = createXHR(); xhr.open("get", "text.php", true); xhr.overrideMimeType("text/xml"); xhr.send(null);
网友评论