AJAX与XMLHttpRequest
XMLHttpRequest:
中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
if(window.XMLHttpRequest){//可以用undefined作为判断条件,但不能用error作为判断条件;变量不定义,加window相当于undefinded;
var oAjax = new XMLHttpRequest(); //用于非ie6
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用于ie6;Microsoft公司的插件
}
| 属性 |
说明 |
|
readyState |
表示XMLHttpRequest对象的状态： |
|
onreadystatechange |
请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。 |
|
responseText |
服务器响应的文本内容 |
|
responseXML |
服务器响应的XML内容对应的DOM对象 |
|
Status |
服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。 |
|
statusText |
服务器返回状态的文本信息。 |
| 方法 |
说明 |
|
Open(string method,string url,boolean asynch, String username,string password) |
指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method:表示http请求方法，一般使用"GET","POST". url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步； 后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。 |
|
Send(content) |
向服务器发出请求，如果采用异步方式，该方法会立即返回。 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。 |
|
SetRequestHeader(String header,String Value) |
设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。 |
|
getAllResponseHeaders() |
返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。 返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！ |
|
getResponseHeader(String header) |
返回HTTP响应头中指定的键名header对应的值 |
|
Abort() |
停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。 |
readyState(网络状态码):
0 － （未初始化）open()方法已经调用，还没有调用send()方法；
1 － （发送请求）已调用send()方法，正在发送请求；
2 － （接收完成）send()方法执行完成，已经接收到全部响应内容 ；
3 － （解析数据）正在解析响应内容 ；
4 － （解析数据完成）响应内容解析完成，可以在客户端调用了；
status(http状态码):
HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码;
| 分类 | 分类描述 |
|---|---|
| 1** | 信息，服务器收到请求，需要请求者继续执行操作 |
| 2** | 成功，操作被成功接收并处理 |
| 3** | 重定向，需要进一步的操作以完成请求 |
| 4** | 客户端错误，请求包含语法错误或无法完成请求 |
| 5** | 服务器错误，服务器在处理请求的过程中发生了错误 |
| 状态码 | 状态码英文名称 | 中文描述 |
|---|---|---|
| 100 | Continue | 继续。客户端应继续其请求 |
| 101 | Switching Protocols | 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议 |
| 200 | OK | 请求成功。一般用于GET与POST请求 |
| 201 | Created | 已创建。成功请求并创建了新的资源 |
| 202 | Accepted | 已接受。已经接受请求，但未处理完成 |
| 203 | Non-Authoritative Information | 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本 |
| 204 | No Content | 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档 |
| 205 | Reset Content | 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域 |
| 206 | Partial Content | 部分内容。服务器成功处理了部分GET请求 |
| 300 | Multiple Choices | 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择 |
| 301 | Moved Permanently | 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
| 302 | Found | 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
| 303 | See Other | 查看其它地址。与301类似。使用GET和POST请求查看 |
| 304 | Not Modified | 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源 |
| 305 | Use Proxy | 使用代理。所请求的资源必须通过代理访问 |
| 306 | Unused | 已经被废弃的HTTP状态码 |
| 307 | Temporary Redirect | 临时重定向。与302类似。使用GET请求重定向 |
| 400 | Bad Request | 客户端请求的语法错误，服务器无法理解 |
| 401 | Unauthorized | 请求要求用户的身份认证 |
| 402 | Payment Required | 保留，将来使用 |
| 403 | Forbidden | 服务器理解请求客户端的请求，但是拒绝执行此请求 |
| 404 | Not Found | 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面 |
| 405 | Method Not Allowed | 客户端请求中的方法被禁止 |
| 406 | Not Acceptable | 服务器无法根据客户端请求的内容特性完成请求 |
| 407 | Proxy Authentication Required | 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权 |
| 408 | Request Time-out | 服务器等待客户端发送的请求时间过长，超时 |
| 409 | Conflict | 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突 |
| 410 | Gone | 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置 |
| 411 | Length Required | 服务器无法处理客户端发送的不带Content-Length的请求信息 |
| 412 | Precondition Failed | 客户端请求信息的先决条件错误 |
| 413 | Request Entity Too Large | 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息 |
| 414 | Request-URI Too Large | 请求的URI过长（URI通常为网址），服务器无法处理 |
| 415 | Unsupported Media Type | 服务器无法处理请求附带的媒体格式 |
| 416 | Requested range not satisfiable | 客户端请求的范围无效 |
| 417 | Expectation Failed | 服务器无法满足Expect的请求头信息 |
| 500 | Internal Server Error | 服务器内部错误，无法完成请求 |
| 501 | Not Implemented | 服务器不支持请求的功能，无法完成请求 |
| 502 | Bad Gateway | 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求 |
| 503 | Service Unavailable | 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中 |
| 504 | Gateway Time-out | 充当网关或代理的服务器，未及时从远端服务器获取请求 |
| 505 | HTTP Version not supported | 服务器不支持请求的HTTP协议的版本，无法完成处理 |
AJAX:
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax特点：
1.缓存
浏览器访问同一个地址 会产生缓存
时间戳 +Math.random()
2.从服务器返回的数据都是string
eval 解析json的时候 必须加括号
拿到数据 先检验一下合法性再解析数据
3.编码格式要统一
前后台统一
国际通用编码 utf-8
中国大陆 gb2312
4. 与后缀名无关
后缀名只是给人看的
function json2str(json){ //将json转str json.t=Math.random(); var arr=[]; for(var name in json){ arr.push(name+'='+encodeURIComponent(json[name])); //encodeURIComponent兼容汉字 } return arr.join('&'); } //json:url,data,type,success,error data是url？后面的东西,type是获取方式 function ajax(json){ json=json||{}; //判断json是否存在,存在则为json if(!json.url) return;//json.url为空则停止 json.data=json.data||{};//判断json.data是否存在,存在则为json.data json.type=json.type||'GET';//获取方式默认为GET json.timeout=json.timeout||10000;//超时处理 //1.创建一个ajax对象 if(window.XMLHttpRequest){//可以用undefined作为判断条件,但不能用error作为判断条件;变量不定义,加window相当于undefinded; var oAjax = new XMLHttpRequest(); //用于非ie6 }else{ var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用于ie6;Microsoft公司的插件 } switch(json.type.toLowerCase()){ case 'get': //2.建立连接 是否异步 oAjax.open('GET',json.url+'?'+json2str(json.data),true); //3.发送 oAjax.send(); break; case 'post': oAjax.open('POST',json.url,true); oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded') oAjax.send(json2str(json.data)); break; } json.loading&&json.loading(); //加载事件 //如果超过指定时间没有请求到数据 var timer=setTimeout(function(){ json.complete&&json.complete();//完成事件,跟成功失败无关 json.error&&json.error(oAjax.status); oAjax.onreadystatechange=null; },json.timeout); //4.接收 oAjax.onreadystatechange = function(){ //网络状态readyState if(oAjax.readyState == 4){ //接收完成 0,初始化1,建立连接2.发送3.接收4.完成 //http的状态status if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){ //接收成功 200-300接收成功 304未修改 404未找到 //从服务器返回的文本 clearTimeout(timer); //成功失败都要关定时器 json.complete&&json.complete(); json.success&&json.success(oAjax.responseText); //如果成功,服务器返回的文本内容 }else{ clearTimeout(timer); json.complete&&json.complete(); json.error&&json.error(oAjax.status);//如果错误,服务器返回的错误码 } } }; }
