AJAX的创建

AJAX

ajax=（异步JavaScript和XML)

指一种创建交互式网页应用的网页开发技术。

通过后台与服务器进行少量的数据交换，实现网页异步更新。

ajax不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行。

 

ajax的优点

●不需要重新加载整个页面的情况下，可以与服务器交换数据并更新部分网络内容；传统的网页（不使用AJAX）如果需要更新内容，必须重新加载整个页面。

●ajax可使因特网应用程序更小，更快，更友好。

●可以提高系统性能，优化用户界面。

ajax的创建过程

①定义XMLHttpRequest对象

var http=new XMLHttpRequest();

②创建XMLHttpRequest连接

   在创建了XMLHttpRequest对象后，用该对象的open（）方法建立一个http请求，即打开客户与服务器之间的通信连接。如下：

http.open(Method,Url,Async,User,Password);

--前两个参数是必要的。

http表示XMLHttpRequest对象实例

Method表示http方法，如POST,PUT,GET和PROPFIND.

Url表示请求地址。

Async为可选选项，设置同步（false），异步(true)

同步：指发送数据后，等到接收到响应以后再发送下一个数据包的通讯方式。

异步：指数据发送后，在未接收到响应时就可以发送下一个数据包。例如：我们在浏览网页时，可以边加载边浏览；而不用等到整个网页都加载完再浏览。

User和Password表示请求的文件需要服务器进行验证，如果未指定，当服务器需要验证时，会弹出验证窗口进行验证。

 

③设置发送请求，开始和服务器端交互

Send（）方法发送请求到http服务器，并接受服务器的响应。

客户端像服务器端传递数据的方式有多种，比较常用的：post和get

语法：http.send()

GET方法[数据绑定在路径之后]

通过查询字符串的方式来传递请求信息，每次在浏览器地址栏中输入URL并打开界面，其实就是在发送GET请求。

GET请求的参数通过（？）前缀附加URL的末尾，参数是以连字符（&）连接的一个或多个名/值对。

Post请求 数据直接在send中

④请求返回的数据   ajax的事件

http.onreadystatechange=function (){
    if(http.readyState==4&&http.status==200)
    {
        /!*5.更新界面*!/
       /!* 读取完成之后 后台返回的数据  一种json  数据格式  一种xml*!/
        console.log(http.response);
    }
}

为判断数据是否发给了服务器，或者服务器是否返回了数据。因此，XMLHttpRequest对象定义了readyState属性来实时跟踪数据传输的状态：判断异步交互的状态。

当readyState属性变化，即触发onreadystatechange事件，从而调动该事件绑定回调函数。借助readystate属性可准确判断请求是否成功。Readystate包括5个值：

0：请求初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪。

XMLHttpRequest可根据服务器响应的数据格式来决定使用那个属性容器来存储返回的信息。常用的为responseText或者responseXML.

Status（常用状态码）

200：请求成功（后台处理结果ok）、303：重定向?

400：请求错误、401：未授权、403：禁止访问、404：文件未找到?

500：服务器错误

get和post是什么呢？http协议中的两种请求方法。
http是基于tcp/ip的关于数据如何在万维网中如何通信的协议。
get和post的区别：
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache（缓存），而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式（form，json格式，xml/text, 默认方式）。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

最最重要：GET产生一个TCP数据包；POST产生两个TCP数据包。
对于get请求，浏览器会把http header 和data一并发送出去，服务器响应200（返回数据）
而post，浏览器先发送header，服务器响应100continue,浏览器再发送data,服务器响应200 ok.(返回数据)