Ajax基础

Asynchronous JavaScript and XML
简单的说就是局部刷新或局部请求

请求：请求行 - 请求头 - 请求体

在AJAX中创建请求对象：

第一步：

实例化一个异步请求对象
var xhr = new XMLHttpRequest();
xhr.open('get', 'test.php');
get请求需要在url后设置参数,
如open('get', 'test.php?name=rose&age=18'),而post仅需要填url
第一个参数是请求的类型，相当于表单的method
第二个参数是请求的地址 是服务器上的地址
第三个参数是设置同步（true）还是异步（false），一般默认是异步。

第二步：设置请求头

get请求头一般跳过不用设置，post才需要设置
参数一：键参数二：值
xhr.setRequestHeader('conrent-type', 'text/html');
在这里仅为示例，post有专门的固定写法，下面有详解

第三步：发送请求 / 设置请求体

发送请求：
xhr.send();
里面的参数也是只有POST才需要设置 ，POST方式在send中发送参数，如：send(name=rose&age=18);

监听响应完成事件：响应完 才拿到

xhr.onload = function () {
xhr.responseText; //获得字符串形式的响应数据。(现阶段常用)
xhr.responseXML;  //获得 XML 形式的响应数据。
        }

响应完成拿到响应体

注意，js写在页面上面的时候暂时用
window.onload = function () { }

发送POST请求：

        var xhr = new XMLHttpRequest();
        xhr.open('post', 'test.php');
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//固定写法！
        xhr.send('对应后端的参数传递方式');
        xhr.onload = function () { }

xhr.onreadystatechange 事件，只要响应变化改变就会产生变化，不存在兼容性问题

xhr.readyState 状态码：

    0: 请求未初始化 （刚刚创建出请求对象）
    1: 服务器连接已建立 （open完成）
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪 （在此阶段拿响应体）

xhr.status 状态码：

    200: "OK"
    404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
用这种方式 替代onload

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("myDiv").innerHTML = xhr.responseText;
                }
            }

以上方式常用！

JSON

JavaScript Object Notation
轻量级的数据传输格式
Json本质是字符串
{ }代表对象: '{"name" : "Jack" , "age" : 18}'
键值对的键必须带引号
[ ]代表数组: '[10,20,30]'

每套语言都有一套API能够把Json转换为自己的语言
如,在JS中的JSON.parse() :

        var obj = '{"name" : "Jack"}';
        JSON.parse(obj);

JS对象转换为JSON字符串：
var str = JSON.stringify(obj);

Ajax基础--初识ajax和JSON