[JavaScript知识库]（JS）Javascript之Ajax

标准浏览器创建Ajax

var xhr=new XMLHttpRequest();

早期IE创建Ajax

var xhr =new ActiveXObject(“Microsoft.XMLHTTP”);

准备发送
xhr.open():接受三个参数，第一个参数为提交方式，第二个参数表示请求地址，第三个参数表示异步或者同步，true为异步，false为同步。
由于浏览器问题，IE浏览器在传递参数时要用encodeURI()编码
如果是get请求，请求参数必须在URL中传递
如果为POST请求，请求参数应该在xhr.send()中，并且不需要转码
使用POST请求，需要设置响应头

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)

发送动作
xhr.send():如果提交方式为get，则需要添加null参数
指定回调函数

	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
		// 返回文本
			}
		}
	}

readyState状态表示
0（未初始化） 对象已建立，但尚未初始化（尚未调用open方法）
1（初始化） 对象已建立，尚未调用send方法
2（发送数据） send方法已调用，但是当前状态以及http头未知
3（数据传送中） 已接收部分数据，因为响应以及http头不全，这时通过respenseBody和responseText获取部分数据会出现错误
4（完成） 数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据
status状态表示
100 continue
101 Switching protocols
200 ok
201 Created
202 Accepted
203 Non-Authoritative Infomation
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Alliwed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
responseText:将响应信息作为字符串返回
responseXML:将响应信息格式化为Xml Document对象返回
XML创建

用来传递少量数据
php开发xml
设置响应头,保证浏览器将相应内容解析为xml格式
header(“Content-Type:text/xml;”);
后面写xml内容
json文件
数据格式
{
“obj1”:”233”,
“obj2”:”333”
}
json和js对象的区别
1.json数据没有变量
2.json形式的数据结尾没有分号
3.json数据中的键必须用双引号包住
解析json
json.parse():将字符串解析为对象
json.stringify():将对象转换为字符串
eval():将字符串解析为对象。eval(“(”+data+”)”)
PHP开发json
json_encode():将数组转为json

Ajax跨域
同源策略
1.同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域
2.同源策略主要为了保证浏览器的安全性
3.在同源策略下，浏览器不允许Ajax获取服务器数据
跨域解决方案
1. jsonp
2. document.domain+iframe
3. location.hash+iframe
4. window.name+iframe
5. window.postMessage
6. flash等第三方插件
jsonp获取数据

1. 静态script标签的src属性进行跨域请求

<script type=”text/javascript” src=”URL”></script>

缺点

1. 使用此方法不能使用异步加载
2. 不方便参数传递