【小结】AJAX和JSON

AJAX：Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

• 交互式应用开发技术
• 快速动态网页的技术
  Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
• 然而并不是一种新的语言，而是几种原有技术的结合体
  优点：
• 异步模式提升了用户体验
• 优化了浏览器和服务器直接的传输，减少了不必要的数据往返，减少了带宽占用
• Ajax引擎在客户端运行减少了服务器负载
  缺点：
• 不支持浏览器返回键
• 安全问题Ajax暴露了与服务器交互的细节
• 对搜索引擎的支持比较弱

---

如何使用Ajax

通常需要以下几个步骤

1、创建XMLHttpRequest对象
2、创建一个新的HTTP请求，并指定该HTTP请求的方法、URL
3、设置响应HTTP请求状态变化的函数

---

XMLHttpRequest

• 可以向服务器提出请求并响应，而不阻塞用户
• 可以在页面加载后进行页面的局部更新
  下面将一个兼容的XMLHttpRequest封装在一个创建函数里：

function  createXHR() {
            if(typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            }else if (typeof  ActiveXObject){
                var  xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
                var  len = xhrArr.length,xhr;
                for (var i = 0; i < len; i++) {
                    try {
                        xhr = new ActiveXObject(xhrArr[i]);
                        break;
                    }catch (e) {
                        
                    }
                }
                return xhr;
            }else {
                throw new Error('no XHR');
            }
        }
        var  xhr = createXHR();
        console.log(xhr);//输出查看XMLHttpRequest对象

---

创建HTTP请求

语法：open(method,url,async)
创建HTTP请求，规定请求的类型、URL是否异步处理请求
参数说明：

• method：请求类型(GET或POST)
  GET比POST更快，但是在以下情况只能用 POST请求：
  • 无法使用缓存文件（更新服务器上的文件或数据库的时候）
    +发送大量数据时（POST没有数据量限制）
  • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
• url：文件在服务器上的位置
  是唯一一个必须指定的参数，用来设置服务器上的文件地址，该文件可以是任何类型的文件，如.txt和.xml，或者服务器脚本文件，如.asp和.php（在传回响应之前，能在服务器上执行任务）
• async ：true（异步）false（同步）

open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原有报错
创建请求示例：
xhr.open("get","./server/slider.json",true);
在创建请求前得先响应一下XMLHttpRequest对象状态变化的函数

xhr.onreadystatechange = function(){  //在onreadystatechange属性发生变化时触发
            if (xhr.readyState ===4){ //0还没初始化 1send已经执行正在发送请求 2send已经执行完毕了 3表示正在解析响应内容 4异步调用成功，响应内容解析完了，可以在客户端调用了
                if((xhr.status >=200 && xhr.status<300) ||xhr.status ===304){
                    //>=200异步调用成功 304表示请求资源没有发生改变，可以直接调用
                }
            }
        }

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status表示阶段

• 200: "OK"
• 304表示请求资源没有发生改变，可以直接调用
• 404: 未找到页面

发送请求

语法：send(string)
将请求发送到服务器
参数：string仅用于post请求
注意事项：仅在POST请求时可以传入参数，不需要则发送null，在调用send方法之后请求被发往服务器
xhr.send()

• 使用get方法创建请求可以在URL后面直接用?在后面写参数传递，多个可以同&隔开

如何添加HTTP头

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

• 语法：xmlhttp.setRequestHeader(header,value)
• 使用：xmlhttp.setRequestHeader("Content-type',"application/x-www-form-urlencoded");

设置响应HTTP请求状态变红的函数

• responseText——从服务器进程返回数据的字符串形式， eval()可以将返回的字符串转化为JavaScript可以执行的代码

• responseXML——从服务器进程返回的DOM兼容的文档数据对象

• status——从服务器返回的数字代码。如404（未找到）

• status Text——伴随状态码的字符串信息

---

JSON

JSON(JavaScript Object Notation, JS 对象b表示法) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率，用于取代繁琐笨重的XML格式。

JSON语法：
简单值
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

• 字符串必须使用双引号，不能使用单引号，数字必须十进制且不能使用NaN和Infinity
• 不支持JavaScript中的特殊值undefined

对象
对象作为一种复杂的数据类型，表示的是一组有序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值
JSON中对象的键名必须放在双引号里面，因为JSON不是JavaScript语句，所有没有末尾分号

• 同一个对象中不应该出现两个同名属性

数组
数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值

• 数值或对象最后一个成员的后面不能加逗号

方法

JSON对象的两个方法

parse()
语法：JSON。parse()
功能：用于将JSON字符转化成对象
stringify()
语法：JSON.stringify()
功能：用于将一个值转为符合JSON格式的字符串，并且可被JSON.parse()方法还原

• JSON之所以流行，是因为可以把JSON数据结构解析为有用的JavaScript对象
• JSON对象的stringify()和parse()这两个方法可以分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值
• JavaScript的eval()类似于.parse()方法，可以将json字符串转换为json对象，但是eval()可以执行不符合JSON格式的代码，可能会包含恶意代码，不建议使用

---

jQuery中的AJAX

语法：

$.ajax({
1 请求地址
2 请求方式
3 数据格式
4 同步异步
5 请求成功的回调 参数为请求到的数据
})

例如：

$.ajax({
            url:"./server/slider.json" //请求地址,
            type:"post", //请求方式
            dataType:"json",  //数据格式
            async:true, //同步异步
            success:function(datas){ //请求成功的回调函数 参数为请求到的数据
                renderData(datas.slider);
            }
        })

---

跨域

同源策略：域名 协议 端口都相同
解决方案：

• 跨域资源共享(CORS)
• 使用JSONP
• 修改document.domain
• 使用window.name