ajax
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