Ajax（二）

一.同步与异步

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认为 true，如果需要同步执行可以通过传递 false 实现：

异步

console.log('before ajax')

var xhr = new XMLHttpRequest()

// 默认第三个参数为 true 意味着采用异步方式执行

xhr.open('GET', '/time', true)

xhr.send(null)

xhr.onreadystatechange = function () {

  if (this.readyState === 4) {

    // 这里的代码最后执行

    console.log('request done')

  }

}

console.log('after ajax')

---

同步

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：

console.log('before ajax')

var xhr = new XMLHttpRequest()

// 同步方式

xhr.open('GET', '/time', false)

// // 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发

// xhr.onreadystatechange = function () {

//  if (this.readyState === 4) {

//    // 会按代码执行顺序执行这行代码

//    console.log('request done')

//  }

// }

xhr.send(null)

// 因为 send 方法执行完成 响应已经下载完成

console.log(xhr.responseText)

console.log('after ajax')

---

兼容方案

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

// xhr 的成员相同

---

二.响应数据格式

JSON

注意：

1.JSON 中属性名称必须用双引号包裹

2.JSON 中表述字符串必须使用双引号

3.JSON 中不能有单行或多行注释

4.JSON 没有 undefined 这个值

5.一个完整的JSON，不能有其他内容掺杂

---

JSON 数据转换

    JSON 格式转JS数据

        JS = JSON.parse(JSON)

        代码：var js_o = JSON.parse(json_o);

    JS数据转JSON

        JSON = JSON.stringify(JS);

         代码：var json_a = JSON.stringify(js_a);

        js数据转为 json数据等号前为json 使用stringify转

        json数据转为js数据等号前为js 使用parse转

---

XML

XML: eXtension 标记语言

一种数据描述手段

淘汰原因：数据冗余太多

---

留言板案例

一.

       

留言板

       

---

       

           

       

       

---

       

           

                称呼：

               

           

           

                留言：

               

           

            提交

       

---

---

二.

   

---

三.