Ajax全方面学习

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

无刷新获得内容:

  1. 动态加载,通过src属性-加载请求(  <img src=”./xxx.php?h=123&d=4″><script src=”x.php”> )
  2. 通过浏览器204特性(页面不跳转 header(“HTTP/1.1 204 no content”) )
  3. XMLHttpRequest对象

XMLHttpRequest对象,使用原生的实现Ajax

var  XHR = new XMLHttpRequest();

使用Ajax必须先创建一个XHR对象,但此方法不支持IE 6 之前的版本。IE6之前的版本要使用

var XHR = new ActiveXObject(“MicroSoft.XMLHTTP”);

这样我们就可以使用XHR对象了。使用XHR 对象方法

open(method,url,async);
send(“string”);
setRequestHeader(“string”.”string”);
responseText:获得字符串式响应数据
responseXML:获得XML形式的响应数据
status和statusText:以数字或文本形式获得HTTP状态码
getAllResponseHeader():获得所有响应报头
getResponseHeader():查询响应中的某个字段的值
readyState是一个请求状态:
0 - (初始化)当刚创建时
1 - (载入地址)已调用open()方法,建立连接成功
2 - (接收头信息)send()方法执行完成,已经接收到响应头
3 - (交互)接收BODY信息完毕后
4 - (完成)接收所有信息完成,服务器发送完毕
监听onreadystatechange事件并对其进行处理(利用javascript队列可以插队的形式,实现了异步方式)

下面来看一个完整的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字段,如下

 

后端只需要获得再将其以调用函数显示即可

 

发表评论

发表回复

*

沙发空缺中,还不快抢~