AJAX 全接触

 

var request;

if(window.XMLHttpRequest){

     request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..

} else {

      request =new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5

}

 

    HTTP:

      http 是计算机通过网络进行通信的规则,是一种无状态的协议(不建立持久连接)

      
       

 
 

    

       

       

 

    发送请求:

     open(method,url,async);method:请求类型,async:是否异步,默认 是true。

     send(string);发送请求到服务器

 

eg:

      request.open("GET","get.php",true);

      request.send();

 

      request.open("POST","post.php",true);

      request.send();

 

      request.open("POST","create.php",true);

      request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

      request.send("name=王二狗&sex=男");

   

     获取响应:

      
     

 
     

    

   通过监听这个readyState属性变化,来知道服务器是否响应完成:

        request.onreadystatechange=function(){

          if(request.readyState ===4 && request.status ===200){

              //做一些事情  request.responseText

 

           }

      }

 

 

    

 

    跨域

         
      

 
       JavaScript 出于安全方面的考虑,不允许跨域调用其他页面的对象。

       跨域:简单理解就是因为JavaScript同源策略的限制,a.com域名下的js,无法操作b.com或是c.a.com域名下的对象。

       

         处理跨域方法:

               1:代理

               2:jsonp

                 JSONP 可用于解决主流浏览器的跨域问题:

    

                   在www.aaa.com页面中:

                   <script>

                     function jsonp(json){

                            alert(json["name"]);

                     }

                    </script>

            

                    <script src="http://www.bbb.com/jsonp.js"></script>

                    在www.bbb.com页面中:

                    jsonp({'name':'111','age':20});

 

                     利用了script标签节点可跨域访问的特性,使b页面可以调用a页面中的方法。

                  

                      ajax 支持jsonp:

 

                         $.ajax({

                                   url:"http://127.0.0.1/..",

                                   dataType:"jsonp",

                                    jsonp:"callback",//值可以随意定,在后台根据该名字获取参数即可。

                                    success:function(){

 

                                }

                              })

 

                        在服务端代码中:

                          因为JQuery会自动在请求的url上带上一个叫callback的参数,值是个随机数。因此在服务器端

                           获取参数callback的值,然后将要返回的内容用callback的值用小括号包裹起来,eg:

                                  String callback1=  request.getParameter("callback");

                                  String result="{'name':'111','age':20}";

                              返回值:callback1+"("+result+")";

 

                      JSONP不支持post。

 

                  3:XHR2

                       HTML5 提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。

                        IE10以下的版本不支持

                        在服务器端(eg:PHP)做一些小小的改造即可:

                        header("Access-Control-Allow-Origin:*");//可以访问的服务器的域名

                        header("Access-Control-Allow-Methods:POST,GET");//

 

 

 

 

 

 

 

猜你喜欢

转载自yhgogo.iteye.com/blog/2307722