原生Ajax
Ajax,是对Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。
使用XHR 对象取得新数据,然后再通过DOM 将新数据插入到页面
var xhr = new XMLHttpRequest();
在使用XHR 对象时,要调用的第一个方法是open(),它接受3 个参数:要发送的请求的类型(”get”、”post”等)、请求的URL 和表示是否异步发送请求的布尔值。
xhr.open("get", "example.php", false);
xhr.send(null);
由于这次请求是同步( 第三个参数设为false )的,JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后,响应的数据会自动填充XHR 对象的属性,相关的属性简介如下。
responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM 文档。
status:响应的HTTP 状态。
statusText:HTTP 状态的说明。
像前面这样发送同步请求当然没有问题,但多数情况下,我们还是要发送异步请求,才能让JavaScript 继续执行而不必等待响应。此时,可以检测XHR 对象的readyState 属性,该属性表示请求/响应过程的当前活动阶段。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);
另外,在接收到响应之前还可以调用abort()方法来取消异步请求,如下所示:xhr.abort();
HTTP头部信息
每个HTTP 请求和响应都会带有相应的头部信息。不同浏览器实际发送的头部信息会有所不同。
使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数:头部字段的名称和头部字段的值。要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);
调用XHR 对象的getResponseHeader()方法并传入头部字段名称,可以取得相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();
GET and POST
对XHR 而言,位于传入open()方法的URL 末尾的查询字符串必须经过正确的编码才行。
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。 其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
xhr.open("post", "example.php", true);
发送POST 请求的第二步就是向send()方法中传入某些数据。
跨域
跨域资源共享(CORS)
CORS(Cross-Origin Resource Sharing,跨源资源共享)使用自定义的HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
在发送请求时,需要给它附加一个额外的Origin 头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部信息来决定是否给予响应。
xhr.setRequestHeader("Origin", "http://www.nczonline.net");
如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin 头部中回发相同的源信息(如果是公共资源,可以回发”*”).
Access-Control-Allow-Origin: http://www.nczonline.net
JSONP
JSONP 是JSON with padding(填充式JSON 或参数式JSON)的简写.
JSONP 是通过动态<script>
元素来使用的,使用时可以为src 属性指定一个跨域URL。这里的<script>
元素与<img>
元素类似,都有能力不受限制地从其他域加载资源。因为JSONP 是有效的JavaScript 代码,所以在请求完成后,即在JSONP 响应加载到页面中以后,就会立即执行。
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
请求到的资源:
handleResponse({"ip":"121.248.49.251","country_code":"CN","country_name":"涓浗","region_code":"32","region_name":"姹熻嫃鐪�","city":"鍗椾含","zip_code":"","time_zone":"Asia/Shanghai","latitude":32.0617,"longitude":118.7778,"metro_code":0});
然后立即执行预定义的callback函数即handleResponse();
function handleResponse(response){
alert("You’re at IP address " + response.ip + ", which is in " +
response.city + ", " + response.region_name);
}
缺点:
JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码。
要确定JSONP 请求是否失败并不容易。
跨文档消息传输
不同网页文档、不同端口、不同域之间进行消息传递。
发送消息:
window.postMessage(message,targetOrigin)
接收消息:
window.onmessage = function(ev){alert(event.data)};
服务器发送事件
SSE(Server-Sent Events,服务器发送事件),服务器发送到客户端的单向通信机制,适用于实时业务。
var source = new EventSource("myevents.php");
接收数据:
source.onmessage = function(event){
var data = event.data;
//处理数据
};
Web Socket
Web Sockets 的目标是在一个单独的持久连接上提供全双工、双向通信。
var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello world!");
socket.onmessage = function(event){
var data = event.data;
//处理数据
};
jQuery 中 Ajax
通过jQuery.ajax( url [, settings ] )接口执行Ajax请求。
url 类型: String
一个用来包含发送请求的URL字符串。
其他参数:
type (默认: ‘GET’)
类型: String
请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
async: 默认设置下,所有请求均为异步请求(也就是说这是默认设置为 true )。如果需要发送同步请求,请将此选项设置为 false 。跨域请求和 dataType: “jsonp” 请求不支持同步操作
cache:(默认: true, dataType为”script”和”jsonp”时默认为false)
如果设置为 false ,浏览器将不缓存此页面
data:发送到服务器的数据。将自动转换为请求字符串格式。
dataType :
“xml”: 返回 XML 文档,可用 jQuery 处理。.
“html”: 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
“script”: 把响应的结果当作 JavaScript 执行。并将其当作纯文本返回。默认情况下不会通过在URL中附加查询字符串变量 “_=[TIMESTAMP]” 进行自动缓存结果,除非设置了cache参数为true。Note: 在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
“json”: 把响应的结果当作 JSON 执行,并返回一个JavaScript对象。
“jsonp”: 以 JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加 “?callback=?”。默认情况下不会通过在URL中附加查询字符串变量 “_=[TIMESTAMP]” 进行自动缓存结果,除非将 cache参数设置为true。
“text”: 返回纯文本字符串。
$.ajax({
type:'get',
url:'',
dataType:'jsonp',
}).success()
.error()
angularJS 中ajax
使用内置的$http服务直接同外部进行通信。
$http({
method: 'GET',
url: '/api/users.json'
}).success(function(data,status,headers,config) {
// 当相应准备就绪时调用
}).error(function(data,status,headers,config) {
// 当响应以错误状态返回时调用
});
快捷方法:
1. get()
$http.get('/api/users.json');
- jsonp()
$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
。。。
AngularJS传递给then()方法的响应对象包含四个属性。
data(字符串或对象)
这个数据代表转换过后的响应体(如果定义了转换的话)。
status(数值型)
响应的HTTP状态码。
headers(函数)
这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字的值。
config(对象)
这个对象是用来生成原始请求的完整设置对象。
statusText(字符串)
这个字符串是响应的HTTP状态文本。
$http({
method: 'GET',
url: '/api/users.json'
}).then (resp) {
// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});