AJAX知识大全

AJAX

Asynchronous JavaScript + XML（异步JavaScript和XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX使用步骤

原生的Ajax使用步骤：

1. 创建XMLHttpRequest 对象

 var xhr =new XMLHttpRequest();

2. 向服务器发送请求

xhr.open("请求方式","请求地址"[,true是否异步]);

对于GET请求，需要在地址后面以查询字符串方式加上携带的参数,最后一个参数默认为true，异步

xhr.send();

如果需要像 HTML 表单那样 POST 数据，在send()函数之前用setRequestHeader() 来添加 HTTP 头。
send() 方法中规定您希望发送的数据:

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

3. 获得来自服务器的响应

当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是XMLHttpRequest 对象的三个重要的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

xhr.onreadystatechange=function(){
    if (xhr.readyState==4 && xhr.status==200){
        document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}

xhr.responseText获得字符串形式的响应数据
responseXML获得 XML 形式的响应数据

4. xhr的其他方法

 xhr.abort() 如果请求已被发出，则立刻中止请求。
 xhr.onload() 请求成功完成时触发.
 xhr.onloadend()当请求结束时触发,

Jquery中的Ajax使用步骤：

1.使用方法

 $.ajax({
 	url:"/jquery/test1.txt",
 	async:false,
 	success:function(res){
 	}
 });

2. 属性方法设置

async	默认值: true,为异步请求。如果需要发送同步请求，请将此选项设置为 false。
$.ajaxPrefilter()	在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
beforeSend(XHR)	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache	默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
complete(XHR, TS)	请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。
contentType	这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）
data	发送到服务器的数据。将自动转换为请求字符串格式。
success	请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
type	请求方式 (“POST” 或 “GET”)， 默认为 “GET”
error	请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
dataType	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断

HTTP报文结构

请求消息

由 请求行、请求头部、空行、请求数据 四部分组成

1.请求行

请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。
GET /data/info.html HTTP/1.1

HTTP协议版本有两种：HTTP1.0/HTTP1.1：
HTTP1.0对于每个连接都只能传送一个请求和响应，请求完服务器返回响应就会关闭，HTTP1.0没有Host字段。
而HTTP1.1在同一个连接中可以传送多个请求和响应，多个请求可以重叠和同时进行，HTTP1.1必须有Host字段。

2.请求头部

用来描述客户端基本信息，由多行键值对组成

常见的请求头字段含义：

部分头部字段名称	描述
Accept-Charset	浏览器可接受的字符集
Accept-Language	浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到
Host	请求的服务器域名
Content-Length	表示请求消息正文的长度
Accept	浏览器可接受的响应内容类型列表
Cookie	通过这个头可以向服务器带数据
User-Agent	浏览器类型

3.空行

通过一个空行，告诉服务器请求头部到此为止，分隔作用

4.请求数据

若方法字段是GET，则此项为空，没有数据
若方法字段是POST,则通常来说此处放置的就是要提交的数据

响应消息

响应报文也由三部分组成：响应行、响应头、空行、响应体

1.请求行

响应行一般由协议版本、状态码及其描述组成

 HTTP/1.1 200 OK

状态码	描述	说明
1xx	这一类型的状态码，代表请求已被接受，需要继续处理，不常见
200	ok	客户端请求成功
301	Moved Permanently	被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一
302	Found	在响应报文中使用首部“Location: URL”指定临时资源位置
304	Not Modified	未修改，服务器不会返回任何资源
400	Bad Request	语义有误，一般为参数错误
401	Unauthorized	请求需要用户验证，一般为权限不够
403	Forbidden	服务器已理解，但是拒绝执行
404	Not Found	服务器无法找到请求的URL
405	Method Not Allowed	不允许使用此方法请求相应的URL
408	Request Timeout	请求超时
500	Internal Server Error	服务器内部错误
501	Internal Server Error	服务器不支持改请求方法
502	Bad Gateway	代理服务器从上游收到了一条伪响应
503	Service Unavailable	服务器此时无法提供服务，但将来可能可用

2.响应头

响应头用于描述服务器的基本信息，以及数据的描述，服务器通过这些数据的描述信息，可以通知客户端如何处理等一会儿它回送的数据。

响应头字段	描述
Allow	服务器支持哪些请求方法
Content-Length	表示内容长度
Date	当前的GMT时间，例如，Date:Mon,31Dec200104:25:57GMT
Last-Modified	文档的最后改动时间
Set-Cookie	设置和页面关联的Cookie
Transfer-Encoding	告诉浏览器数据的传送格式
setContentType	设置Content-Type头。大多数Servlet都要用到这个方法

3.响应体

响应体就是响应的消息体，如果是纯数据就是返回纯数据，如果请求的是HTML页面，那么返回的就是HTML代码，如果是JS就是JS代码。