全面解析Ajax和jsonp使用总结
前言：ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新。
一、ajax
•定义：一种发送http请求与后台进行异步通讯的技术。
•原理：实例化xmlhttp对象，使用此对象与后台通信。
ajax的同源策略：
•ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全考虑。
--------------------------------------------------------------------------------
ajax的方法：
1. $.ajax({}):
•常用参数： •url：请求网络地址
•type：请求方式，默认是'GET'，常用'POST'
•dataType：设置返回的数据格式，一般使用json，也可以是html和jsonp；
•data：设置发送给服务器的数据
•.done():设置请求成功后的回调函数
•.fail():设置请求失败后的回调函数
•async:设置是否异步，默认值是'true'，表示异步
•代码运用：
$(function () {
$("input").click(function () {
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//请求成功的回调函数
$("input").val(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
说明：data表示后台返回的数据；ajax使用需要依赖服务器环境。
2. $.get():
•$.get() 方法使用GET请求从服务器加载数据;也是一种无刷新的请求数据的ajax方法。
•参数：
•url:访问的网址，需要遵循同源策略；
•data:发送到服务器的数据。
•function(data,status){}：请求成功运行的函数
•dataType：请求响应的数据类型。
//参考代码：
$(function () {
$("input").click(function () {
$.get(
"./data.json",
function (data,status) {
console.log(data.name);
},
"json"
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
•$.get()方法的参数和$.ajax()不一样，网址url为必须的参数，其他三个可选。
•data为返回的数据，status表示请求的状态，一般有""success","error","timeout"等几种。
•如果datatype类型为jsonp，也可以跨域请求数据。
•无请求失败的回调函数。
3. $.post()
•$.get() 方法使用POST请求从服务器加载数据;
•其使用的方法和$.get()方法完全一样。
4. $.load():
•从服务器加载数据，不需要指定datatype,返回的数据会自动放置到元素中。
•参数：
•URL:地址；
•data:请求的参数，可选；
•function(response,status,xhr)：请求成功的回调函数。
$(function () {
$("input").click(function () {
$(".box").load(
"./data.json",
function (response,status) {
console.log(data.name);
}
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
<div class="box"></div>
</div>
</body>
•返回的数据会放置在div中；
•不能跨域访问数据；
•response为返回的数据，status为请求的状态；
•无请求失败的回调函数。
4. getJSON()
•方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
•参数：
•url: 请求网址，必须的参数；
•data: 发送给服务器的数据；
•function(data,status,xhr):请求成功的回调函数
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
•方法直接获取的是json数据；
•无返回失败的回调函数；
•回调函数时命名函数，不是匿名函数；
5. getScript()
•方法使用 AJAX 的 HTTP GET 请求获取并执行js代码。
•参数：
•url: 请求网址，必须的参数；
•function(data,status):请求成功的回调函数
$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
•返回结data是js代码；
•该方法可以用来动态加载js代码。
二、jsonp
•定义：一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。
•原理：利用script标签可以跨域链接资源的特性。
用法一：函数传参
<script type="text/javascript">
function aa(data){
console.log(data.name);
}
</script>
<script type="text/javascript" src="....../data.js"></script>
说明：在外部定义一个data.js文件，这个文件的路径可以与当前页面不在同一个域下面。
data.js的内容：
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})
•将数据以页面定义的函数的参数的形式传递进去，从而获取数据。
•本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。
用法二：利用ajax
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
•data.js的内容和上面一样。
•使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。
•以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。
•目前这种方式仍然有其局限性，就是必须知道data.js文件的名字和定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.
用法三
var $input = $("input");
$input.keyup(function () {
$.ajax({
url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
type:'get',
dataType:'jsonp', //jsonp格式访问
data: {word: $input.val()},
})
.done(function(data){
console.log(data);
})
.fail(function() {
alert('服务器超时，请重试！');
});
})
....
<body>
<input type="text">
</body>
•通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
•服务器返回的数据会自动传给回调的匿名函数的参数data.
总结
以上所述是小编给大家介绍的Ajax和jsonp使用总结，需要的朋友参考下
相关推荐
-
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
JSONP 调用示例代码: 复制代码 代码如下: var originImgSrc = 'cnbogs-logo.gif';$.jsonp({ url: '', data: { imgSrc: originImgSrc }, callbackParameter: "callback", success: function (newImgSrc, textStatus, xOptions) { console.log(xOptions.data.im
-
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON). JSON是一种数据格式,JSONP是一种数据调用方式. 复制代码 代码如下: //JSON { "name": "sb" } 复制代码 代码如下: //JSONP callback({ &q
-
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML).Ajax 可以为用户提供更为丰富的用户体验. Ajax 请求由 JavaScript 驱动,通过 JavaScript 代码向 URL 发送一个请求,待服务端有响应时会触发一个回调函数,可以在这里回调函数里面处理服务端返回的信息.由于整个发送请求和响应的过程是异步的,所以在此期间页面中其它 Javascript 代码仍
-
jquery ajax中使用jsonp的限制解决方法
jsonp 解决的是跨域 ajax 调用的问题.为什么要跨域 ajax 调用呢?这样可以在一个应用中直接在前端通过 js 调用另外一个应用(在不同的域名下)的 API.我们在实际应用中也用到了 jsonp ,但之前只知道 jsonp 的一个限制,只能发 get 请求,get 请求的弊端是请求长度有限制.今天,发现 jsonp 的另外一个限制(在jquery ajax的场景下) -- 不会触发 $.ajax 的error callback,示例代码如下: 复制代码 代码如下: $.ajax({
-
跨域请求之jQuery的ajax jsonp的使用解惑
直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
-
全面解析Ajax和jsonp使用总结
前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax •定义:一种发送http请求与后台进行异步通讯的技术. •原理:实例化xmlhttp对象,使用此对象与后台通信. ajax的同源策略: •ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全考虑. ---------------------------------------------------------------------
-
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
前言 第一次听说jsonp,其实早在2年之前.当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成jsonp.于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式...直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难. 为什么要用jsonp? 相信大家对跨域一定不陌生,
-
全面解析$.Ajax()方法参数(推荐)
先给大家介绍下Ajax概念 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新
-
全面解析Ajax综合应用(全)
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面.
-
基于ajax和jsonp的原生封装(实例)
最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的.其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然后服务器端响应的数据格式为[函数调用(foo(实参))],所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致.这里声明的函数是由服务器响应的内容(实际就是一段js代码-函数调用)来调用. 其他的就不多说了,直接上代码. 'use strict'; function ajax(obj){ var defaults
-
javascript解析ajax返回的xml和json格式数据实例详解
本文实例讲述了javascript解析ajax返回的xml和json格式数据.分享给大家供大家参考,具体如下: 写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2).请求路径 (3).使用open方法绑定发送请求 (4).使用send() 方法发送请求 (5).获取服务器返回的字符串
-
Ajax的jsonp方式跨域获取数据的简单实例
jsonp的调用,今天碰到了,正好整理了一下. <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b
-
AJax与Jsonp跨域访问问题小结
####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F
-
HTTP状态代码及其定义解析 Ajax捕捉回调错误参考
HTTP状态代码及其定义解析 Ajax捕捉回调错误参考 状态行包含HTTP版本.状态代码.与状态代码对应的简短说明信息.在大多数情况下,除了Content-Type之外的所有应答头都是可选的.但Content-Type是必需的,它描述的是后面文档的MIME类型.虽然大多数应答都包含一个文档,但也有一些不包含,例如对HEAD请求的应答永远不会附带文档.有许多状态代码实际上用来标识一次失败的请求,这些应答也不包含文档(或只包含一个简短的错误信息说明). 当用户试图通过 HTTP 访问一台正在运行 I
-
关于jQuery.ajax()的jsonp碰上post详解
前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与jsonp 跨域:由于受到同源策略(协议.域名.端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了.跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明. jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,