Ajax

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属性进行数据的跨域访问.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容