Ajax全接触

来自慕课网视频教程学习

1. 简介：

AJAX(Asynchronous JavaScript and XML 异步的JavaScript和XML)：无需加载整个网页的情况下，实现网页的部分更新。

2.关于HTTP 协议：

2.1 HTTP是一种无状态协议（不建立持久的连接，没记忆）
2.2 HTTP请求过程步骤：

1.建立TCP连接
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头信息
4.web服务器应答
5.web服务器发送应答头信息
6.web服务器向浏览器发送数据
7.web服务器关闭TCP连接

2.3 http请求组成部分：

1.HTTP请求的方法或动作，如GET或POST请求
2.正在请求的ＵＲＬ地址
3.请求头，包含一些客户端环境信息，身份验证信息等
4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

2.4 http响应的组成部分：

1.一个数字和文字组成的状态码，用来显示请求是否成功
2.响应头，响应头也和请求头一样，包含很多有用的信息
3.响应体，也就是响应正文

2.5 HTTP状态码：

http状态码由3位数字构成，其中首位数字定义了状态码的类型
1XX：信息类，表示收到web浏览器请求，正在进一步的处理中
2XX：成功，表示用户；请求被正确接收，理解和处理
3XX：重定向，表示请求没有成功，客户必须采取进一步动作
4XX：客户端错误，表示客户端提交的请求有错误
Found：说明请求中所引用的文档不存在
5XX：服务器错误，表示服务器不能完成请求的处理

3 关于XMLHttpRequest

3.1 XMLHttpRequest方法：

open(method,url,async); //发送请求方法,请求地址，请求同步/异步(true/false)
send(string);
setRequestHeader();//设置头信息，写在send和open中间。

3.2 XMLHttpRequest获取响应：

1.responseText:获得字符串形式的响应数据
2.responseXML:获得XML形式的响应数据
3.status和statusText:以数字和文本形式返回HTTP状态码
4.getAllResponseHeader():获取所有的响应报头
5.getPesponseHeader():查询响应中的某个字段的值

3.3 readyState属性：

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

3.4 代码示例
document,getElementById("search").onclick = function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open("GET","service.php?number="+document.getElementById("keyword").value"");
request.send();
//监听事件
request.onreadystatechange = function(){
if(request.readyState===4 && request.status===200){
document.getElementById("searchResult").innerHTML=request.responseText;
}else{
alert("发生错误："+request.status);
}
//如果是POST请求方式，则：
request.open("POST","service.php");
//需将post请求提交的数据拼成URL参数
var data="name"+document.getElementById("staffName").value
+"&name"+document.getElementById("staffName").value;
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(data);
}
}

2.9 json解析方式

1.eval（不检查json字符串的合法性，不推荐使用）
2.parse
json字符串格式化和校验工具：jsonlint.com
var data = JSON.parse(request.responseText);

4.jQuery实现Ajax

$(document).ready(function(){
$("#search").click(function(){
$.ajax({
    type:"GET",
    url:"service.php?number="+$("#keyword").val(),
    dataType:"json",
    success:function(data){
        if(data.success){
            $("#searchResult").html(data.msg);
        }else{
            $("#searchResult").html("出现错误："+data.msg);
        }
    },
    error:function(jqXHR){
    alert("发生错误："+jqXHR.status);
}
})
})
})

5.处理跨域的方式

Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。不同域名之间相互请求资源，就算作“跨域”，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

处理跨域方法一——代理：
通过在同域名的web服务器端创建一个代理

处理跨域方式二——JSONP(只支持GET请求)：
JSONP可用于解决主流浏览器的跨域数据访问的问题。
在www.aaa.com页面中：
<script>
function jsonp(json){
alert(json["name"]);
}
</script>
<script src="http;//www.bbb.com/jsonp.js"></script>
在www.bbb.com页面中：
jsonp({'name':'xx','age':24})

处理跨域的方法三——XHR2：
1.HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
2.IE10以下的版本都不支持
3.在服务器端
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');