Ajax技术及跨域

原生JS Ajax请求：

传统方法的缺点：

传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，再做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多。

什么是ajax？

ajax的出现，刚好解决了传统方法的缺陷，ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，ajax可以使网页实现异步更新，这意味着在可以不用重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。负责Ajax运作的核心对象是XMLHttpRequest（XHR）对象

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码（常用）
send(content)	向服务器发送请求（常用）
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

五步使用法:

1.创建XMLHTTPRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.更新界面

例如：

<div id="block"></div>

get请求：

    var ajax=new XMLHttpRequest();//创建服务交互对象
    ajax.open("get","./data/data.txt",false);//建立连接
    ajax.send();//发送请求
    ajax.onreadystatechange=function(){    //注册事件
         //服务器返回成功
        if(ajax.readyState==4&&ajax.status==200){
            console.log(ajax.response);
        }
    }
    document.getElementById("block").innerHTML=ajax.response;

同步：false js代码会等待请求结束之后（服务器响应之后）再去继续执行。因此html中会出现返回的数据。

异步：true 请求和下面代码可同时执行，此时服务器未响应，ajax.response不存在。因此html中不会出现数据。

post请求：

    var ajax=new XMLHttpRequest();
    ajax.open("post","./data/data.txt"，false);
    ajax.send();                //post方法这里可传输数据
    ajax.onreadystatechange=function(){
        if(ajax.readyState==4&&ajax.status==200){
            console.log(ajax.response);
        }
    }
    document.getElementById("block").innerHTML=ajax.response;

为了方便使用,我们可以把它们封装进方法里面,要用的时候,直接调用就好了

    ajax_method("get","./data/data.txt","");
    function ajax_method(method,url,data){
        var ajax=new XMLHttpRequest();
        ajax.open(method,url);
        if(method=="post"){            //根据请求的方式进行区别
            if(data){
                ajax.send(data);
            }else{
                ajax.send();
            }
        }
        else{
            ajax.send();
        }
        ajax.onreadystatechange=function(){
            if(ajax.readyState==4&&ajax.status==200){
                console.log(ajax.response);
            }
        }
    }

注意：只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

JS跨域原理：

js跨域是指通过js在不同的域之间进行数据传输或通信。

1.通过JSONP跨域

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般在请求中指定。而数据就是传入回调函数的JSONP数据。

JSONP是通过动态<script>元素来使用的，使用时可以为src属性指定一个跨域URL。这里的<script>元素与<img>元素类似，都有能力不受限制地从其他域加载资源。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。

<script>
    function dosomething(jsondata){
      console.log(jsondata);
    }
</script>
<script src="http://localhost:80/ajax0609/php/data.php?callback=dosomething"></script>

<?php
$callback=$_GET[callback];//得到路径传递的参数  也就是函数名称
$data=array("a","b","c");
echo $callback."(".json_encode($data).")";
?>

2. CORS解决跨域问题

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

PHP后台配置：只需要配置php后台允许跨域。

方法：在php开头加上header('Access-Control-Allow-Origin: *');

<?php
 header('Access-Control-Allow-Origin: *');//允许跨域访问
$callback=$_GET[callback];//得到路径传递的参数  也就是函数名称
$data=array("a","b","c");
echo $callback."(".json_encode($data).")";
?>

    var ajax=new XMLHttpRequest();
    ajax.open("get","http://localhost:80/ajax0609/php/data.php");
    ajax.send();
    ajax.onreadystatechange=function (){
        if(ajax.readyState==4&&ajax.status==200)
        {
          console.log(ajax.response);
        }
    }

猜你喜欢