关于Ajax

1.XMLHttpRequest

(1)创建xhr对象

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
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>

(2)xhr的用法

使用xhr对象,第一个方法是open()。栗子:

1
2
3
4
xhr.open("get","test.php",false);//三个参数:get还是post,请求的url,是否异步。
要发送特定请求,需要调用下面的send()方法:
xhr.open("get","test.php",false);
xhr.send(null);

等到服务器响应后,相关数据填充xhr对象的属性,如下:
responseText:作为相应主题,返回的文本
responseXML:如果相应的内容类型是test/xml或者application/xml这个属性中将会保存着相应数据的XML DOM文档。
status:相应http状态。
statusText:http状态的说明。
在接受响应后,1,检查status,如果是200,成功,此时responseText已经可以访问了,此外如果状态码是304,表示请求的资源没有修改,可以直接使用浏览器的缓存版本,当然也意味着响应式有效地。一般如下检查:

1
2
3
4
5
6
7
8
9
xhr.onReadyState=function(){
if(xhr.readyState==4){
if(xhr.status>=200||xhr.status=304){
alert("yes,ok");
}else{
alert("no"+xhr.status);
}
}
}

readyState属性:0,1,2,3,4.分别代表的意义:(省略)

2.get和post区别

标准答案:
GET在浏览器回退时是无害的,而POST会再次提交请求。

GET产生的URL地址可以被Bookmark,而POST不可以。

GET请求会被浏览器主动cache,而POST不会,除非手动设置。

GET请求只能进行url编码,而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的,而POST么有。

对参数的数据类型,GET只接受ASCII字符,而POST没有限制。

GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。

GET参数通过URL传递,POST放在Request body中。
对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);

而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

也就是说,GET只需要汽车跑一趟就把货送到了,而POST得跑两趟,第一趟,先去和服务器打个招呼“嗨,我等下要送一批货来,你们打开门迎接我”,然后再回头把货送过去。
参考:99%的人理解错 HTTP 中 GET 与 POST 的区别

3,跨域

jsonp,getjson,xhr2(XMLHTTPREQUEST Level2),HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。但ie10以下不支持只需要在服务端填上响应头:

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
header("Access-Control-Allow-Origin:*");
/*星号表示所有的域都可以接受,*/
header("Access-Control-Allow-Methods:GET,POST");
跨浏览器的cors(Cross-Origin Resource Sharing跨域资源共享):
function createCORSRequest(method,url){
var xhr=new XMLHttpRequest();
if("withCredentials" in xhr){
xhr.open(method,url,true);
}else if(typeOf XDomainRequest !="undefined"){
xhr=new XDomainRequest();
xhr.open(method,url);
}esle{
xhr=null;
}
return xhr;
}
var request=createCORSRequest("get","http://sdsdjasda");
if (request){
request.onload=function(){
//对request处理
}
request.send();
}

其他解决跨域方法:
我曾经用过JSONP处理跨域,详见我的githubbaidu-search

comet,没怎么看,但是貌似很重要。