
无刷新获得内容:
- 动态加载,通过src属性-加载请求( <img src=”./xxx.php?h=123&d=4″><script src=”x.php”> )
- 通过浏览器204特性(页面不跳转 header(“HTTP/1.1 204 no content”) )
- XMLHttpRequest对象
XMLHttpRequest对象,使用原生的实现Ajax
var XHR = new XMLHttpRequest();
使用Ajax必须先创建一个XHR对象,但此方法不支持IE 6 之前的版本。IE6之前的版本要使用
var XHR = new ActiveXObject(“MicroSoft.XMLHTTP”);
这样我们就可以使用XHR对象了。使用XHR 对象方法
send(“string”);
setRequestHeader(“string”.”string”);
responseText:获得字符串式响应数据
responseXML:获得XML形式的响应数据
status和statusText:以数字或文本形式获得HTTP状态码
getAllResponseHeader():获得所有响应报头
getResponseHeader():查询响应中的某个字段的值
1 - (载入地址)已调用open()方法,建立连接成功
2 - (接收头信息)send()方法执行完成,已经接收到响应头
3 - (交互)接收BODY信息完毕后
4 - (完成)接收所有信息完成,服务器发送完毕
下面来看一个完整的Ajax请求
var XHR = new XMLHttpRequest(); //创建一个XHR对象 XHR.open("GET","res_api.php?qq=12345&b=gagd",false); //第三个是一个布尔值,默认就是使用异步方式 //如果设置为true,那么在send()方法后线程会被阻塞 //XML ----- POST (请使用 setRequestHeader 来添加 HTTP 头) //不设置请求头将无法提交数据 //XHR.
setRequestHeader("Content-type","application/x-www-form-urlencoded");//XHR.send("data=ajax&name=cwj95"); XHR.onreadystatechange = function(){ if(XHR.readyState === 4){ if(XHR.status === 200){ //......获得以后的要想执行的代码 }else{ //........出现错误的处理方式 } } } XHR.send(); //发送数据
使用第三方jQuery库实现AJAX..
$.ajax({
type:"GET"
url:"res_api.php?qq=12345&b=gagd"
dataType:"json"
success:function(data){
if(data.success){
//......获得以后的要想执行的代码
}else{
//........出现错误
}
}
error:function(xxx){
//........出现错误的处理方式
}
});
如果Ajax想要访问远程的接口文件,这个过程叫做跨域,但由于JS同源策略的影响,所以想要跨域,必须要提前处理,否刚会报错!!!
XMLHttpRequest cannot load http://xxx.xxx/abc.php. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost’ is therefore not allowed access.
处理跨域可以使用下列的三种方式:
1.代理: 通过后端的php来访问远程,在返回给js,这种方式我们就不演示了
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。但ie10以下不支持
只需要在服务端填上响应头(这个比较方便):
<?php
header("Access-Control-Allow-Origin:*");
/*星号表示所有的域都可以接受,*/
header("Access-Control-Allow-Methods:GET,POST");
3.jsonP(JsonP只能通过GET请求返回数据)
如果还通过json进行跨越,那么就会报错
这个问题和安全机制有关,默认不允许跨域调用,这里我们使用JSONP解决这个问题
$.ajax({
url:'http://xxx.xxx/abc.php',
method:'get',
dataType:'jsonp',
jsonp:'datademo',
success:function(data){
......... //通过jsonp就可以返回一个json对象
}
});
//当然后端也要处理
$cc = $_GET['datademo'];
echo $cc.'('.json_encode(array(1,2,3,5)).")";
JSONP原理:
其实JSONP并不是Ajax的规则,只是我们需要处理跨域请求时的一种解决方案,大家约定俗成的方法,一种有规则的字符串…..
他就是一个函数,通过 callback传入函数名,如下
GET: http://cwj95.com/func.php?callback=aa&…….
RETURN: aa({website:cwj95.com,name:正励志,qq:594262005})
我们在自己的script脚本中构造aa函数,这样就能直接获取到括号里的对象了
JS: function aa(object){ alert(object); }
我们通过 动态添加标签,就可以去请求数据,可以发现,我们并没有用到XMLHttpRequest对象
在jQuery中,已经为我们封装好了JSONP , 如上面的jsonp:’datademo’,Jquery会自动赋值一个datademo字段,如下
后端只需要获得再将其以调用函数显示即可
发表评论
沙发空缺中,还不快抢~