JavaScript进阶——JSON、AJAX

一、JSON

1. json字符串必须使用双引号

2. json对象要求给key值加双引号，而JavaScript对象字面量不需要

3. 解析：json对象转换为JavaScript对象

    序列化：JavaScript对象转换为json对象

二、AJAX

1. 什么是ajax

 Ajax是Asynchronous  JavaScript Xml的简称，通过Ajax可以请求额外的数据而无需刷新页面，给用户带来更好的体验。

2. XMLHttpRequest（XHR）

（1）Ajax技术的核心是XMLHttpRequest对象（简称XHR），使用如下方式创建XMLHttpRequest对象

// 不考虑IE6及以下版本的浏览器
var xhr = new XMLHttpRequest();

（2）XHR的用法：在使用XHR对象时，要调用的第一个方法是open()，它接受三个参数：

①要发送的请求类型：GET/POST

②要请求的URL

③是否异步发送请求，true为异步，false为同步(如果请求是同步的，在服务器返回数据之前，网页无法响应用户的操作)

xhr.open("get", "http://www.xxx.com/xxx", false);

注意：open()方法不会发送请求，只是准备请求，send()方法会真正的发送请求

（3）XHR有两个非常重要的属性

①responseText：从服务器返回的文本

②status：从服务器返回的状态码

注意：状态码为304说明请求的数据没有被修改，此时直接使用了缓存的版本，也视为成功

// 不考虑IE6及以下版本的浏览器
var xhr = new XMLHttpRequest();

xhr.open("get", "http://www.xxx.com/xxx", false);
xhr.send(null);

if(xhr.status == 200 || xhr.status == 304) {
    alert(xhr.responseText);
} else {
    alert(xhr.status);
}

 （4）大多数情况下，使用异步请求。异步使用需要检测XHR对象的readyState属性，readyState属性有0、1、2、3、4五个值。4表示已经从服务器接收到所有数据了。

每次readyState改变，都会触发一次readyStateChange事件，所以可以在readyStateChange事件中检测readyState的值。

// 由于某些浏览器兼容问题，需要在调用open方法之前定义xhr.onreadystatechange事件

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status == 200 || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert(xhr.status);
        }
    }
}

xhr.open("get", "http://www.xxx.com/xxx", true);
xhr.send(null);

3. GET和POST

（1） get方法

在定义xhr.open时将参数及值拼接在url尾部

（2）post方法

在定义xhr.send时将参数及值传递给服务端，但是对post请求需要做一些特殊的处理，服务器才能正确的接受请求。如：

xhr.open(...);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("key=value");

4. 跨域——JSONP

（1）关于跨域

XHR实现Ajax有一个限制→跨域安全。默认情况下，XHR对象只能访问与包含它的页面在同一个域中的资源。

（2）什么是jsonp

jsonp，即json with padding，是一种解决跨域问题的方法。

（3）jsonp是通过动态添加script标签来实现的，<script>标签可以不受任何限制，从其他域加载资源。

因为jsonp是有效的JavaScript代码，所以在请求完后，就会立即执行。

function renderResult(args) {
    if (typeof args == "object") {
        alert(args);
    }
}

function addScript() {
    var script = document.createElement("script");
    script.src = "http://www.xxx.com?key1=value1&key2=value2&callback=renderResult";
    document.body.insertBefore(script, document.body.firstChild);
}