jQuery方法使用Ajax技术

三层封装方法：

最底层：$.ajax()；
中间层：.load()、$.get()和$.post()
最高层：$.getScript()和$.getJSON()

一、中间层------load（）、$get()、$post()

（1）load(参数1，参数2，参数3)-------------------（局部方法）
1，参数1：url 必需的URL,规定希望加载的url地址（后端php代码文件路径）
2，参数2：data 可选，与请求一同发送的 key/value 数据，参数类型为 Object；
3，参数3： callback 可选，load方法完成后所执行的回调函数，参数类型为函数 Function。（通常情况下需要书写）

<div id="tip"></div>
<label for="username">用户名:</label>
<input type="text" name="userID" value="" id="username"/>
<input type="button" value="验证" id="btn"/>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var cO=$("#username").val();
$("#tip").load("js/checkU.php?username="+cO,function(res,stateT,xhr){
                        console.log(res);
//                      console.log(res);    //js ====    xhr.responseText
//                      console.log(statusT);  //        success
//                      console.log(xhr);   //js ====    new XMLHttpRequest()
//                      console.log(xhr.status);//        200
//                      console.log(xhr.statusText);//     ok

                    });
                });
            });
    </script>

（2）$.get(url,[data],[callback],[type])-------------------------（全局方法）

url: 必需 待载入页面的URL地址;
data: [可选] 待发送 Key/value 参数;
callback: [可选] 载入成功时回调函数;
type: [可选] 返回内容格式，xml, html, script, json, text, _default。

<div id="tip"></div>
<label for="username">用户名:</label>
<input type="text" name="userID" value="" id="username"/>
<input type="button" value="验证" id="btn"/>

    <script type="text/javascript">
            $(function(){
                $("#btn").click(function(){
                    var cO=$("#username").val();
                    $.get("js/checkU.php",{"username":cO},function(res,stateT,xhr){
                        $("#tip").html(xhr.responseText);
                        console.log(res);
                        console.log(stateT);
                    });
                });
            });
    </script>

(3)$.post(URL,data,callback)----------------------------(全局方法)

URL 必需 参数规定您希望请求的 URL。
Data [可选] 参数规定连同请求发送的数据。
Callback [可选] 参数是请求成功后所执行的函数名。

二、最高层-------$.getScript()、$.getJSON()

$.getScript()，用于加载特定的 JS 文件；
$.getJSON()，用于专门加载 JSON 文件。

1.$.getScript(url,callback)
url参数为服务器的请求地址，
callback参数为数据请求成功后，执行的回调函数。

三、底层$ajax()

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。JQuery封装的底层Ajax操作函数，更加侧重于定制化选项，让开发人员控制的细节方面更加精确。
语法：
$.ajax({name:value, name:value, ... })
参数 类型 说明
url String 发送请求的地址
type String 请求方式：POST 或 GET，默认 GET
timeout Number 设置请求超时的时间（毫秒）
data Object 或String 发送到服务器的数据，键值对字符串或对象
dataType String 返回的数据类型，比如 html、xml、json 等
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数
complete Function 请求完成后调用的回调函数
success Function 请求成功后调用的回调函数
error Function 请求失败时调用的回调函数
async Boolean 默认为Boolean 是否异步处理。默认为 true，false 为同步处理

跨域：

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。
先来看看哪些情况下才存在跨域的问题：
编号 URL 说明 是否允许通信
1 http://www.a.com/a.js http://www.a.com/b.js
同一域名下 允许
2 http://www.a.com/lab/a.js http://www.a.com/script/b.js
同一域名下不同文件夹 允许
3 http://www.a.com:8000/a.js http://www.a.com/b.js
同一域名，不同端口 不允许
4 http://www.a.com/a.js https://www.a.com/b.js
同一域名，不同协议 不允许
5 http://www.a.com/a.js http://70.32.92.74/b.js
域名和域名对应ip 不允许
6 http://www.a.com/a.js http://script.a.com/b.js
主域相同，子域不同 不允许 ‘3w属于二级域名’
7 http://www.a.com/a.js http://a.com/b.js
同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
8 http://www.a.com/a.js http://www.b.com/b.js
不同域名 不允许

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

同源策略:

浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

为什么跨域?

为了让某些数据实现不同域名上的共享，以达到数据共用提高处理效率的目的，需要对部分数据进行跨域访问！

如何实现跨域?

1、JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。(不支持post请求)。
核心：通过script标签的src属性，进行域名的包装来完成跨域数据的访问。Src来模拟数据的来源，通过和要访问的服务器的域名一致，进行同源数据的访问，间接实现的跨域数据访问。

2、代理：

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3、PHP端修改header（XHR2方式）

ie10以下版本不支持
在php接口脚本中加入以下两句即可：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

我们通常采用JSONP的方法来实现跨域.

json与jsonp的区别：

json是一种数据格式，jsonp是数据访问的方式

原生js跨域:

原生js中,通过动态增加script标签,指定src属性进行数据的跨域访问.