ajax过程详解
一、创建对象XMLHttpRequest()
Date()对象
ActiveXObject('Microsoft.XMLHTTP')
二、Open方法
这个方法带有3个参数
1、提交方式Form-method----------get(post)
2、提交地址Form-action
3、是否异步（同步）------------true（false）
异步：非阻塞，前面的代码不会影响1后面的代码执行
同步：阻塞，前面的代码会影响后面的代码的执行
三、Send方法
发送数据请求，相当于Form的submit
四、请求状态监控
onreadystatechange事件
1、readyState属性：请求状态
0（初始化）-------还没有调用open（）方法
1（载入） --------已调用send（）方法，正在发送请求
2（载入完成）-----send（）方法完成，已收到全部响应内容
3（解析）---------正在解析响应内容
4（完成）---------响应内容解析完成，可以在客户端调用了
2、status属性：服务器（请求资源）的状态
3、返回的内容
responseText：返回以文本形式存放的内容
responseXML:返回XML形式的内容
五、发送请求（get和post的区别）
send（要发送的数据）：发送请求
按照上面所述，一个原生js的ajax的基本结构大概就是这样了
//创建一个ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//发送请求，这里发送请求名为1.txt的文件
xhr.open('get', '1.txt', true);
//提交
xhr.send();
//等待服务器返回内容
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
alert(xhr.responseText)
}
}
但是，我们还需要做一些处理，所以需要封装一个ajax.js
六、数据类型（返回数据的处理）
1、服务器返回的真正数据
2、XML/HTML/JSON
要点：json的写法，
Eval解析JSON的时候需要注意的地方
json.parse():字符串解析成对象
七、ajax.js的封装
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
使用方式，js部分，请求了叫demo3.php的文件，这里主要是用json格式的数据进行传递
ajax('get','demo3.php','',function(data) {
var data = JSON.parse( data );
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
html部分
<ul id="ul1"></ul>
八、另外，目前jsonp的数据格式也是用得很广泛
jsonp:json with padding
1、script标签
2、用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情 然后需要的时候通过script标签加载1对应远程文件资源，当远程的文件 资源被加载进来的时候，就会去执行我们之前定义好的函数，并且把数据当做这个数据 的参数传入进去
用法如下，这里请求了一个路径，然后返回一个的接收数据的函数，一般叫callbank,但也有可能叫其他，这个命名主要是后台给出命名的。然后自己在随意一个函数来接收返回的数据。这里接收数据的函数叫fn2
<button id="btn2">按钮2</button>
<ul id="ul2"></ul>
<script type="text/javascript">
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
var oScript = document.createElement('script');
oScript.src = 'getData.php?t=str&callback=fn2';
document.body.appendChild(oScript);
}
function fn2(data){
var oUl2 = document.getElementById('ul2');
var html = '';
for(var i = 0; i < data.length; i++){
html += '<li>'+ data[i] + '</li>';
}
oUl2.innerHTML = html;
}
</script>
然后根据jsonp原理，我做了2个小demo，一个仿百度搜索的页面，查看demo你可以狠狠的点击这里
原理：百度输入框其实是你每输入一个字就发送了一次跨域请求，你可以打开调试工具，查看网路那一栏，当你输入一个字母时，就会发送一个请求，你找到发送的那条请求地址即可
第二个demo就是仿豆瓣的查找书单，这个是很简陋的demo,没有太完善，bug还是有的，重点是看请求回来的数据进行显示，这个demo引入了jquery的分页插件，了解这个分页插件请点击这个地址http://www.lovewebgames.com/jsmodule/paging.html，提交的数据接口为豆瓣的开发者提交接口。代码下载见底部，
相关代码下载地址链接：http://pan.baidu.com/s/1eSCDjCA 密码：kyff
代码运行环境，把代码放到本地服务器（XAMPP）里运行，然后在浏览器输入页面地址，若非这个本地服务器运行，可能会出现其他bug