Nancy's Studio.

Ajax学习笔记

Word count: 1,619 / Reading time: 7 min
2019/02/05 Share

认识Ajax

Ajax:Asynchronous Javascript and XML (即异步的javascript和XML),是一种在无需重新加载整个页面的情况下能够更新部分页面的技术。通过在后台跟服务器进行少量的数据交换,网页就可以实现异步局部更新。

运用HTML和CSS实现页面,然后构建XMLHttpRequest对象进行页面与web服务器间的异步数据交换,页面获取到响应信息后运用Javascript操作DOM,实现局部动态更新。

Ajax-XMLHttpRequest对象构建

1
2
3
4
5
6
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari...
}else{
request = new ActiveXObject("Microsoft.XMLHTTP"); //IE5,IE6
}

Ajax-HTTP请求

HTTP是计算机通过网络进行通信的规则,是一种无状态的协议。

完整的HTTP请求步骤:

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

GET:一般用于信息获取,使用URL传递参数,发送信息的数量限制在2000个字符内

POST:一般用于修改服务器上的资源,对所发送信息数无限制

HTTP状态码:

  • 1XX:表示接收到浏览器请求,正在处理信息
  • 2XX:成功,用户请求被正确接收、理解和处理 (200 OK)
  • 3XX:重定向,表示请求没有成功,用户必须采取进一步操作
  • 4XX:客户端错误,表示客户端提交的请求有误
  • 5XX:服务器错误,表示服务器不能完成对请求的处理

XHR发送请求

open(method,url,async)

send(string)

1
2
3
4
5
6
7
request.open("GET","get.php",true);
request.send();

request.open("POST","create.php",true);
//设置头信息
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=nancy&age=3");

XHR取得响应

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

status和statusText:以数字和文本形式返回HTTP状态码

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询响应中的某个字段的值

readyState属性

  • 0:请求未初始化,open还未调用
  • 1:服务器连接已建立,open已经调用了
  • 2:请求已接收
  • 3:请求处理中
  • 4:请求已完成,响应已就绪
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
request.onreadystatechange = function(){
if(request.readyState === 4){
//判断响应结果
if(request.status === 200){
//成功,通过responseText得到响应文本
return success(request.responseText);
}else{
//失败,根据响应码判断失败原因
return fail(request.status);
}
}else{
//HTTP请求还在继续...
}
}
request.open('GET','/api/categories');
request.send();

JSON

JSON:Javascript对象表示法。JSON是存储和交换文本信息的语法,类似XML。它采用键值对的方式组织起来,易于阅读和编写,同时易于机器解析和生成。JSON是独立于语言的,只要符合JSON的规则,无论什么语言都可以解析JSON。

JSON的长度与XML格式相比很短小,读写速度快。JSON可以使用javascrip内建的方法直接进行解析转换成JavaScript对象,十分便捷。

JSON语法规则

JSON数据的书写格式:名称/值对 (比如:”name”:”nancy”)

JSON的值可以是数字、字符串、逻辑值、数组(在方括号中)、对象(在花括号中)和null。

1
2
3
4
5
6
{
"staff":[
{"name":"nancy","age":3},
{"name":"pig","age":2}
]
}

JSON解析方式

1
2
3
4
5
var jsondata = '{"staff":[{"name":"nancy","age":3},{"name":"pig","age":2}]}';
//第一种方式用eval不会看JSON数据形式是否合法,直接执行,是不安全的
var jsonObj = eval('('+jsondata+')');
//第二种方式用parse函数相对安全
var jsonObj2 = JSON.parse(jsondata);
1
2
3
4
5
6
7
8
9
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200){
var data = JSON.parse(request.responseText);
if(data.success){...}
else {...}
}else { alert("发生错误:"+request.status); }
}
}

用JQuery实现Ajax

jQuery.ajax([settings])

  • type:类型,”POST“或”GET“,默认为”GET“
  • url:发送请求的地址
  • data:是一个对象,连同请求发送到服务器的数据
  • dataType:预期服务器返回的数据类型。如果不确定,jQuery将自动根据HTTP包MIME信息智能判断,一般采用JSON格式,可设置为”JSON“
  • success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串
  • error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "service.php?number="+$("#keyword").val(),
dataType: "json",
success: function(data){
if(data.success){
}else{...}
},
error: function(jqXHR){...}
});
});
});

处理跨域方式

当协议、子域名、主域名、端口号中任意一个不同时都算作不同域,不同域之间相互请求资源就算作“跨域”。Javascript出于安全方面的考虑,不允许跨域调用其他页面的对象,即Javascript同源策略的限制。

方法一:创建代理

在同域名的服务器上创建代理。比如现在有两个服务器域名分别为www.beijing.com和www.shanghai.com,在北京的服务器后端(www.beijing.com/proxy-shanghaiservice.php)调用上海服务器(www.shanghai.com/service.php)的服务,然后把响应结果返回给前端。

方法二:JSONP

JSONP可用于解决主流浏览器的跨域数据访问问题(不支持POST请求)

1
2
3
4
5
6
7
8
9
//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':'nancy','age':3});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "service.php?number="+$("#keyword").val(),
dataType: "jsonp",
jsonp: "callback",
success: function(data){
if(data.success){
}else{...}
},
error: function(jqXHR){...}
});
});
});

方法三:XHR2

HTML5提供的XMLHttpRequest Level2已经实现跨域访问和其他新功能(IE10以下版本不支持)

只需在服务器端添加两句话即可:

1
2
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');

方法四:CORS

CORS:Cross-Origin Resource Sharing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {

// "withCredentials"属性是XMLHTTPRequest2中独有的
xhr.open(method, url, true);

} else if (typeof XDomainRequest != "undefined") {

// 检测是否XDomainRequest可用
xhr = new XDomainRequest();
xhr.open(method, url);

} else {

// 看起来CORS根本不被支持
xhr = null;

}
return xhr;
}

var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}

参考:CORS详解

CATALOG
  1. 1. 认识Ajax
  2. 2. Ajax-XMLHttpRequest对象构建
  3. 3. Ajax-HTTP请求
  4. 4. XHR发送请求
  5. 5. XHR取得响应
  6. 6. JSON
    1. 6.1. JSON语法规则
    2. 6.2. JSON解析方式
  7. 7. 用JQuery实现Ajax
  8. 8. 处理跨域方式
    1. 8.1. 方法一:创建代理
    2. 8.2. 方法二:JSONP
    3. 8.3. 方法三:XHR2
    4. 8.4. 方法四:CORS