Ajax全接触的笔记

此笔记整理自尚硅谷Ajax视频和慕课网的《Ajax全接触》

---

同步和异步的概念

同步：客户端向服务器端发送请求，服务器收到请求后处理请求，这个时候，客户端处于等待状态，直到服务器处理完毕后，将响应结果返回给客户端。这个时候页面进行了刷新，于是看到了显示响应结果的页面。

异步：XMLHttpReuquest对象能够实现异步的数据交互，页面不需要重新进行整个的刷新，只进行局部刷新。

HTTP请求

一个HTTP请求一般由四个部分组成：

1. HTTP请求的方法，比如GET或者POST；
2. 正在请求的URL地址；
3. 请求的头部分，包括一些客户端环境信息，身份验证信息等；
4. 请求体，也就是请求正文可以包含客户提交的表单信息等。

GET：一般用于信息获取；使用URL传递参数；对所发送信息的数量是有限制的。

POST：一般用于修改服务器上的资源；对所发送信息的数量是无限制的。

一个HTTP响应一般由三个部分组成：

1. 一个数字和文字组成的状态码，用来显示请求是成功的还是失败的；
2. 响应的头部分，响应头也和请求头一样包含很多有用的信息，比如服务器类型、日期时间等；
3. 响应体，也就是响应正文。

状态码：详见之前写的博客 关于超文本传送协议HTTP的小小总结

创建XMLHttpRequest对象

var request = new XMLHttpRequest();       //IE67不支持噢，但是现在前端只需要兼容到IE8哈

XMLHttpRequest发送请求

open（method,url,asynch）建立对服务器的调用

• method：请求类型，"GET"或者"POST"；
• url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径；
• 在某些情况下，有些浏览器会吧多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。
• asynch：表示请求是否要异步传输，默认值为true。true表示异步，false表示同步；

send（content） 向服务器发送请求。如果使用GET请求，这里的content参数值为none；如果使用post请求，send一定要填写参数。

sendReuquestHeader("header","value") 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open（）

XMLHttpRequest取得响应

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

status和statusText:以数字和文本形式返回HTTP状态码

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询响应中的某个字段的值

readyState：该属性表示Ajax请求的当前状态。

• 0：表示请求未初始化，open方法还没有调用
• 1：服务器连接已建立，open方法已经调用，但是send方法还没有被调用
• 2：请求已接受，send方法已经被调用，也就是接收到头信息了
• 3：请求处理中，服务器正在发送响应
• 4：请求已完成，也就是响应发送完毕

每次readyState值的改变都会触发readyStateChange事件。readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4。

JSON（JavaScript Object Notation）

概念：JavaScript对象的表示方法描述数据。JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只需要按照JSON的规则来就行。

优点：与XML相比，JSON读写的速度更快；可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便。因此，前端与服务器端进行数据交互用JSON。

语法规则: 和JavaScript对象表示法类似，区别在于JSON对象的属性名必须要加上双引号。

例子：

{
    "staff": [
        {
            "name": "张三",
            "age": 18
        },
        {
            "name": "李四",
            "age": 22
        },
        {
            "name": "郭靖",
            "age": 21
        }
    ]
}

上面这个例子中，{}表示一个JSON对象，staff是这个JSON对象的键，它的值是一个数组，数组里面是三个对象，每个对象有两个属性，一个name属性，一个age属性。

 JSON解析

1. eval方法存在安全性问题，不仅解析字符串，还会解析JS方法。
2. JSON.parse(）较安全。（IE67不支持）

---

btw：服务器端代码调试工具：Fiddler

        JSON在线校验工具：JSONLint  （http://jsonlint.com）