AJAX中

同步虽然简单,但使用异步调用 才是我们真正常用的手段 。使用异步 调用的时候 需要触发readystatechange事件,然后检测readyState属性即可。这个属性有五个值 ,0 1 2 3 4 。

addEvent(document,'cllick',function(){
var xhr= createXHR();
xhr.onreadystatechange=function(){
//alert(xhr.readyState) // 1 2
if(xhr.readyState==4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}else{
alert('猎取数据错误,错误代号:'+xhr.status+'错误信息:'+xhr.statusText);
}
};
xhr.open('get','demo.php?rand='+Math.random(),true);
xhr.send(null);
// xhr.abort() //取消异步请求
});

GET POST请求
GET使用频率高于POST,
在WEB程序上,GET一般是URL提交请求,比如:demo.php?name=lee&age=100

www.abc.com/list.php?page=2
list.php接收到page=2这个参数后再去请求数据库

PS:如何理解句中的问号?
给你举个栗子、
网站文章页列表使用动态方式展示
如何让程序知道我要展示哪一页
www.abc.com/list.php?page=2
list.php接收到page=2这个参数后再去请求数据库
然后把数据库返回的数据用html标签输出

最初的网站都是动态展示的,后来为了得到好的搜索引擎排名才出现了将动态生成静态的潮流
所谓动态就是 一个动态语音页面通过传入不同的参数就输出不同的内容

举个不带问题的动态链接
www.00lw.com/index.php
织梦做的站 首页调用了最新文章的情况下
如果采用静态模式 需要每次生成首页才能显示最新增加的文章
使用动态流量模式就不需要了 增加完新文章后 直接访问就能显示
因为动态页面每次都去数据库请求最新的文章
而静态HTML是写死的

PST一般是WEB表单提交 比如:

HTTP头信息
//在网络那里查看
两种头信息:一种是响应头信->服务器返回的信息,客户端可以获取,但不可以设置 。一个是请求头信息->是可以设置 但不可以获取

//头信息

addEvent(document,'cllick',function(){
var xhr= createXHR();
xhr.onreadystatechange=function(){
//alert(xhr.readyState) // 1 2
if(xhr.readyState==4){
if(xhr.status == 200){
// alert(xhr.getAllResponseHeaders()); //获取全部响应头信息
alert(xhr.getResponseHeader('Content-Type')); //获取意念响应头信息
}
}else{
alert('猎取数据错误,错误代号:'+xhr.status+'错误信息:'+xhr.statusText);
}
};
xhr.open('get','demo.php?rand='+Math.random(),true);
xhr.setRequestHeader('myheader','lee');//设置请求头信息,一般没什么用,在POST提交请求有用
xhr.send(null);
// xhr.abort() //取消异步请求
});

GET请求

addEvent(document,'cllick',function(){
var xhr= createXHR();
xhr.onreadystatechange=function(){
//alert(xhr.readyState) // 1 2
if(xhr.readyState==4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}else{
alert('猎取数据错误,错误代号:'+xhr.status+'错误信息:'+xhr.statusText);
}
};
xhr.open('get','demo.php?rand='+Math.random(),true);
xhr.send(null);
// xhr.abort() //取消异步请求
});

//中文乱码问题 AJAX返回的数据其实是UTF-8,最简单的办法是全部改为UTF-8;
//特殊字符 需要通过encodeURIComponent来编码解决

addEvent(document,'cllick',function(){
var xhr= createXHR();
var url='demo.php?rand='+Math.random();
//alert(url);
url=params(url,'name',Le&e);
url=params(url,'age',100);
xhr.onreadystatechange=function(){
//alert(xhr.readyState) // 1 2
if(xhr.readyState==4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}else{
alert('猎取数据错误,错误代号:'+xhr.status+'错误信息:'+xhr.statusText);
}
};
xhr.open('get','demo.php?rand='+Math.random(),true);
xhr.send(null);
// xhr.abort() //取消异步请求
});

function params(url,name,value){
url+=url.indexOf('?')==-1?'?':'&';
url += encodeURIComponent(name) +'='+encodeURIComponent(value);
return url;
}

一般来说,向服务器发送OST请求明白股份解析机制的原因 ,需要进行特别的处理。因为POST请求和EB表单提交是不同的,需要使用XHR来模仿表单提交 。

//PS 使用XHR来模仿表单提交 有三步

xhr.open('post',url,true); //第一步 改为POST
xhr.steRequest('Content-Type','application/x-www-form-urlencoded'); //第三步 模拟表单提交
xhr.send('name=lee&age=100'); //第二步 将名值对放入send方法

你可能感兴趣的:(AJAX中)