Ajax基础

Javascript 数据交互

一、Ajax概念介绍

1.同步和异步

1）同步：

客户端：发起请求-等待...页面载入
服务器端：处理请求，响应（这个过程中客户端处于等待阶段）

2）异步：客户端和服务器端相互不会堵塞。

运用HTML、CSS实现页面，表达信息
通过XMLHttpRequest对象实现数据的异步交互
运用JavaScript操作DOM，实现动态局部刷新

2.Http请求

Http是一种无状态的协议，没有记忆功能。
1）Http请求过程：

建立TCP连接——Web浏览器向Web服务器发送请求命令——Web浏览器发送请求头信息——Web服务器应答——Web服务器发送应答头信息——Web服务器向浏览器发送数据——Web服务器关闭TCP连接

2）Http请求组成：

1.请求的方法或动作，比如GET还是POST请求
2.正在请求的URL
3.请求头，包含客户端信息，身份验证信息等
4.请求体，包含客户提交的查询字符串信息，表单信息等

GET：一般用于信息获取，使用URL传递参数（变量会显示在URL中，所有人都可以见，同时信息的数量也有限制）
POST：用于修改服务器上的资源，不使用URL传递，对发送信息的数量没有限制

3）Http响应组成：

1.一个数字和文字组成的状态码，用于显示请求成功还是失败
2.响应头，包含有用的信息，例如服务器类型，日期时间，内容类型
3.响应体，也就是响应正文

4）状态码：由3位数字构成，其中首位数字定义了状态码的类型

1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中
2XX：成功，表示用户请求被正确接收，理解和处理例如：200 OK
3XX：重定向，表示请求没有成功，客户必须采用进一步的动作
4XX：客户端错误，表示客户端提交的请求有错误，如404 NOT FOUND
5XX：服务器错误，表示服务器不能完成对请求的处理

3.XMLHttpRequest对象

创建XMLHttpRequest

var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest()
}else{
    request = new ActiveXObject();//兼容IE6及以下版本
}

4.XMLHttpRequest发送请求

1）open方法：

open(method,url,async)//url是服务器端数据页地址

2）send方法：

send(string)//GET方法可以不用参数，POST方法一般需要参数

5.XMLHttpRequest取得响应

1）相关属性和方法

responseText：取得字符串形式的响应数据
status和statusText：以数字和文本形式返回HTTP状态码
//request.status === 200 表示请求成功
getAllResponseHeader()：获取所有的响应报头
getResponseHeader()：查询响应中的某个字段的值

2）readyState属性：

0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接收，也就是接收到了头信息
3：请求处理中，也就是接收到响应主体
4：请求已完成，且响应已就绪，即响应完成//请求完成并不一定成功

通过onreadystatechange事件监听readyState属性的变化

  request.onreadystatechange = function(){//监听readyState属性的变化
        if(request.readyState === 4 && request.status === 200){
            //do something
        }
    }

二、Json

1.Json定义：JavaScript对象表示法

2.Json小例子

{
    "staff": [
        {"name": "张三", "ID": 123},
        {"name": "李四", "ID": 124}
    ]
}

3.Json解析：利用JSON.parse()方法

var jsonData = '{"staff": [//json字符串
            {"name": "张三", "ID": 123},
            {"name": "李四", "ID": 124}]
    }';
var jsonObj = JSON.parse(jsonData);//将json数据转换为json对象

4.Json校验：JSONLint工具

三、跨域

1.域名地址

域名地址组成：协议+子域名(www)+主域名(abc.com)+端口号+请求资源地址。如：
http://www.abc.com:8080/scripts/jquery.js

2.跨域
当协议、子域名、主域名、端口号中任意一个不同时，都算作不同域，而不同域之间请求资源时，就算作"跨域"。
JavaScript处于安全方面的考虑。不允许跨域调用其他页面的对象

3.处理跨域

1）代理：通过后端服务器进行代理，访问其他服务器

2）JSONP：只能支持GET请求（借助script标签可以跨域访问的特性，与Ajax关系不大）

3）XHR2：IE10以下不支持

四、一个小例子

{        //json文件
    "success": true,
    "msg": {
        "name": "abc",
        "id": 123
    }
}

var request = new XMLHttpRequest();
request.open("GET","aJson.json",true);//aJson.json文件就是上面的文件
request.send();

request.onreadystatechange = function(){

    if( request.readyState === 4 ){//发送请求结束

        if( request.status === 200 ){//响应成功

            var jsonData = request.responseText;
            var jsonObj = JSON.parse(jsonData);
            alert(jsonObj.msg.name);

        }else{

            alert("出现错误了!!");

        }

    }

}