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。(通常情况下需要书写)
(2)$.get(url,[data],[callback],[type])-------------------------(全局方法)
url: 必需 待载入页面的URL地址;
data: [可选] 待发送 Key/value 参数;
callback: [可选] 载入成功时回调函数;
type: [可选] 返回内容格式,xml, html, script, json, text, _default。
(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属性进行数据的跨域访问.