Javascript基础系列(十六)-ajax

ajax

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);

XMLHttpRequest

xhr = new XMLHttpRequest();

xhr.open(param1, param2, param3);

• param1 请求类型方式 POST GET ...
• param2 请求url地址
• param3 是否异步 false, true

open之后可以设置头部参数
setRequestHeader(key , value)

发送数据,不包含数据体时设置null
xhr.send(null);

收到响应后，会自动填充xhr对象, 属性有如下

• responseText 响应内容
• responseXML
• status 响应状态
• statusText HTTP 状态的文本说明
• getAllResponseHeaders() 可以获取头部设置的参数

XMLHttpRequest扩展

FormData

var formdata = new FormData();
formdata.append(key,value);

var formId = document.getElementById('myForm');
var formdata = new FormData(formId);

timeout

var xhr = new XmlHttpRequest();
..open..
xhr.timeout = 1000;
xhr.ontimeout = function() {
	...
}

overrideMimeType

重写xhr响应的mime类型
xhr.overrideMimeType("text/xml")

进度事件

每个请求都从触发 loadstart 事件开始，接下来是一或多个 progress 事件，
然后触发 error、abort 或 load 事件中的一个，最后以触发 loadend 事件结束

•  loadstart：在接收到响应数据的第一个字节时触发。
•  progress：在接收响应期间持续不断地触发。
•  error：在请求发生错误时触发。
•  abort：在因为调用 abort()方法而终止连接时触发。
•  load：在接收到完整的响应数据时触发。
•  loadend：在通信完成或者触发 error、abort 或 load 事件后触发。

progress

• lengthComputable 进度信息是否可用 布尔
• position 已接收字节数
• totalSize 总大小

readystate

•  0：未初始化。尚未调用 open()方法。
•  1：启动。已经调用 open()方法，但尚未调用 send()方法。
•  2：发送。已经调用 send()方法，但尚未接收到响应。
•  3：接收。已经接收到部分响应数据。
•  4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

CORS（Cross-Origin Resource Sharing，跨源资源共享）

Origin: http://www.mywebsite.com

就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

图像Ping

 var img = new Image();
 img.onload=function(){
		...
 }
 img.src="xxx";

JSONP

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写

function handleResponse(response){ 
	alert("You’re at IP address " + response.ip + ", which is in " + 
	response.city + ", " + response.region_name); 
} 

var script = document.createElement("script"); 
script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
document.body.insertBefore(script, document.body.firstChild);