Ajax

一、ajax基本概念

ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML）
ajax的核心是XmlHttpRequest对象。

一 ajax原理：

1.利用html和CSS来实现页面，表达信息 
2.运用XmlHttpRequest对象来和服务器进行数据交换 
3.JavaScript操作DOM，实现局部刷新

二 XMLHttpRequest对象的创建

 // . 创建对象
        var xhr = new XMLHttpRequest();

三、 XmlHttpRequest发送请求

// 请求方式，请求地址，是否异步.

open(method,url,async);

//请求内容，get请求的请求内容已经拼接在了url后面，所以send没有参数，
//post请求一定要有参数。

send(string);

例如get请求：

    // 1. 创建对象
        var xhr = new XMLHttpRequest();
        
        // 2. 调用此对象中【 准备】（打开）方法
        //        参数1： 请求数据的方式 GET / POST ， put 等
        //        参数2： 请求数据的地址
        //        参数3： false 是同步的方式， true 就是异步
        xhr.open("GET", "http://localhost:8080/ajax/ajaxtest", false);
        
        // 3. 发送
        xhr.send();
        
        // 4. 获取数据
        console.log(  xhr.responseText );

Post请求：

// 请求地址
var url = "http://localhost:8080/ajax/football"; 

var xhr = new XMLHttpRequest();

// 第1个参数 POST， 如果采用post方式，就会自动忽略 地址字符串后面的信息
xhr.open("POST", url, true)

//POST请求和Web表单提交不同，需要使用 XHR 来模仿表单提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//  传递参数，数据是放在 send 方法中传递的
xhr.send("pageNo=1");

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var str = xhr.responseText;
    }
}

在请求的过程中，需要监听readyState的变化，它的变化代表着请求响应的变化。

// 1. 创建对象
    var xhr = new XMLHttpRequest();
    
    // 2. 调用此对象中【 准备】（打开）方法
    //        参数1： 请求数据的方式 GET / POST ， put 等
    //        参数2： 请求数据的地址
    //        参数3： false 是同步的方式， true 就是异步
    
    xhr.open("GET", "http://localhost:8080/ajax/ajaxtest", false);
    
    // 3. 发送
    //xhr.send();
    // 如果采用同步方式，那么send会等数据回来之后，才执行后面的代码
    //                  readyState==4
    
    // 异步的定义：
    //       请求数据 和 页面的执行 是互不干扰的
    //    问题： 我怎么知道数据回来了？
    //     利用回调函数
    //     onreadystatechange   在 准备状态 发生改变时
    //           状态改变时，会自动调用这个函数
    xhr.onreadystatechange = function() {
        
        // xhr.readyState 准备状态
        //      0       还没有发送请求
        //      1       已经发送请求，服务器还没收到
        //      2   服务器已经收到请求，还没有处理
        //      3   服务器已经处理好，并发送给客户端
        //      4   客户端已经收到数据
        // console.log( xhr.readyState )
        
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log( "2" );
            // console.log( xhr.responseText );
        }
    }
    
    xhr.send();
    
    // 1, 2
    //   因为异步执行，所以不影响 主程序的运行，同时 网络传输是比较慢的，
    //      所以数据是需要隔一段时间才过来，所以先执行1，再执行2
    console.log("1");
    
    // 4. 获取数据
    // console.log(  xhr.responseText );
}   

三、 JSON数据格式 JSON，JavaScript对象表示法(JavaScriptObjectNotation)

JSON和XML比较
1、JSON 长度和XML比起来很短小
2、JSON的读写速度更快，数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
3、JSON可以直接用JavaScript内建的方法进行解析，转化成JavaScript对象。
4、JSON解析：eval和JSON.parse

eval
var jsonObi = eval('(' + jsonData + )');

JSON.parse
var jsonObj = JSON.parse(jsonData);

四、ajax跨域

JavaScript出于同源策略的限制，不可以跨域。

跨域的解决方法:
1.代理
后端处理
2.其他方式的跨域
img 可以跨域
css 文件也可以跨域
script 也可以跨域