Ajax的进阶学习(二)
JSON和JSONP
如果在同一个域下，$.ajax()方法只要设置dataType属性即可加载JSON文件。而在非同域下，可以使用JSONP，但也是有条件的。
Ajax进阶.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax进阶</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form>
用户名：<input type="text" name="user" />
邮 件：<input type="text" name="email" />
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="button" value="提交" />
</form>
<span class="loading">正在加载中...</span>
<div id="box"> </div>
</body>
</html>
tomcat服务器端test.json：
[
{
"url" : "www.ycku.com"
}
]
若没有声明dataType(即dataType:"html")：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"test.json",
success:function(response, status, xhr) {
alert(response); //若没有声明dataType(即dataType:"html")，test.json的整个文件内容都会返回(连带test.json的标签)
alert(response[0].url); //若没有声明dataType(即dataType:"html")，返回undefined
}
});
});
所以，需要声明返回的类型是“json”，$.ajax()加载JSON文件：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"test.json",
dataType:"json",
success:function(response, status, xhr) {
alert(response); //[object Object]
alert(response[0].url); //www.ycku.com
}
});
});
现在来看跨域处理问题。
一、①本地获取，本地tomcat服务器端有jsonp.php文件：(也不知道嘛意思？)
<?php
//这个文件是远程端：http://www.li.cc/jsonp.php
$_arr = array('a'=>1,'b'=>2,'c'=>3);
$_result = json_encode($_arr);
echo $_result;
?>
//本地获取jsonp.php文件，成功
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"jsonp.php",
dataType:"json",
success:function(response, status, xhr) {
//alert(response);
console.log(response);
alert(response.a); //1 本地获取没问题
}
});
});
②跨域获取，将jsonp.php文件放在远程端http://www.li.cc
//跨域获取jsonp.php文件，失败
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"http://www.ll.cc/jsonp.php",
dataType:"json",
success:function(response, status, xhr) {
//alert(response);
console.log(response);
alert(response.a);
}
});
});
二、①本地获取，本地tomcat服务器端有jsonp2.php文件：
如果想跨域操作文件的话，我们就必须使用JSONP。JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
<?php
//这个文件是远程端：http://www.li.cc/jsonp2.php
$_arr = array('a'=>1,'b'=>2,'c'=>3);
$_result = json_encode($_arr);
$_callback = $_GET['callback'];
echo $_callback."($_result)";
?>
//本地获取jsonp2.php文件，成功
$("form input[type=button]").click(function() {
$.getJSON("jsonp2.php?callback=?", function() {
alert(response.a); //
console.log(response);
});
});
url中参数callback值的可以是任意数，也可传一个？(会生成一个随机数)，如上，会发现传过去的是诸如：
callback=jQuery112305981071515026646_1461671727709&_=1461671727710
②$.getJSON()方法跨域获取JSON
$("form input[type=button]").click(function() {
$.getJSON("http://www.ll.cc/jsonp2.php?callback=?", function() {
alert(response.a); //
console.log(response);
});
});
$.ajax()方法跨域获取JSON：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"http://www.ll.cc/jsonp2.php?callback=?",
dataType:"json",
success:function(response, status, xhr) {
//alert(response);
console.log(response);
alert(response.a);
}
});
});
因为返回类型不是jsonp，所以无法达到我们预期的效果，所以应修改为：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"http://www.ll.cc/jsonp2.php?callback=?",
dataType:"jsonp",
success:function(response, status, xhr) {
//alert(response);
console.log(response);
alert(response.a);
}
});
});
jqXHR对象
在之前，我们使用了局部方法：.success()、.complete()和.error()。这三个局部方法并不是XMLHttpRequest对象调用的，而是$.ajax()之类的全局方法返回的对象调用的。 这个对象，就是jqXHR对象，它是原生对象XHR的一个超集。
获取jqXHR对象，查看属性和方法
$("form input[type=button]").click(function() {
//jqXHR就是$.ajax()返回的对象
var jqXHR = $.ajax({
type:"post",
url:"user.php",
data:$("form").serialize()
});
jqXHR.success(function(response) {
alert(response);
});
});
注意：如果使用jqXHR对象的话，那么建议用.done()、.always()和.fail()代替.success()、.complete()和.error()，因为在未来版本中，很可能将这三种方法废弃取消。
$("form input[type=button]").click(function() {
//jqXHR就是$.ajax()返回的对象
var jqXHR = $.ajax({
type:"post",
url:"user.php",
data:$("form").serialize()
});
jqXHR.done(function(response) {
alert(response);
});
});
使用jqXHR的连缀方式比$.ajax()的属性方式有三大好处：
1.可连缀操作，可读性大大提高
2.可以多次执行同一个回调函数
3.为多个操作指定回调函数
来看第1、2点：
$("form input[type=button]").click(function() {
//jqXHR就是$.ajax()返回的对象
var jqXHR = $.ajax({
type:"post",
url:"user.php",
data:$("form").serialize()
});
jqXHR.done(function(response) { //可连缀操作，多次执行同一个回调函数(done())
alert(response + "1");
}).done(function(response) {
alert(response + "2");
});
jqXHR.done(function(response) {
alert(response + "3");
});
});
再来看第3点：
有t1.php文件如下：
<?php
echo "test1.php";
?>
t2.php文件如下：
<?php
echo "test2.php";
?>
$("form input[type=button]").click(function() {
var jqXHR = $.ajax("t1.php");//ajax()也可直接传一个url
var jqXHR2 = $.ajax("t2.php");
//这是我们本能想到的
/*
jqXHR.done(function(response) {
alert(response);
});
jqXHR2.done(function(response) {
alert(response);
});
*/
//多个操作指定回调函数
$.when(jqXHR, jqXHR2).done(function(r1, r2) {
alert(r1[0]); //alert(r1)-->test1.pph,success,[object Object]，object为r1的jqXHR对象
alert(r2[0]);
});
});
Ajax的进阶学习(二)的更多相关文章
- Ajax的进阶学习(一)
在Ajax课程中,我们了解了最基本的异步处理方式.本章,我们将了解一下Ajax的一些全局请求事件.跨域处理和其他一些问题. 加载请求 在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长 ...
- zuul进阶学习（二）
1. zuul进阶学习(二) 1.1. zuul对接apollo 1.1.1. Netflix Archaius 1.1.2. 定期拉 1.2. zuul生产管理实践 1.2.1. zuul网关参考部 ...
- SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- React Native 学习笔记--进阶（二）--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- Matlab 进阶学习记录
最近在看 Faster RCNN的Matlab code,发现很多matlab技巧,在此记录: 1. conf_proposal = proposal_config('image_means', ...
- emberjs学习二(ember-data和localstorage_adapter)
emberjs学习二(ember-data和localstorage_adapter) 准备工作 首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用 ...
- Wireshark入门与进阶系列(二)
摘自http://blog.csdn.net/howeverpf/article/details/40743705 Wireshark入门与进阶系列(二) “君子生非异也,善假于物也”---荀子 本文 ...
- SpringBoot进阶教程(二十九)整合Redis 发布订阅
SUBSCRIBE, UNSUBSCRIBE 和 PUBLISH 实现了 发布/订阅消息范例,发送者 (publishers) 不用编程就可以向特定的接受者发送消息 (subscribers). Ra ...
- 状态保持以及AJAX的初步学习
嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...
随机推荐
- 2天驾驭DIV+CSS （实战篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- WdatePicker 动态变量表
4. 日期范围限制静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日 ...
- iOS开发多线程篇—单例模式（ARC）
iOS开发多线程篇—单例模式(ARC) 一.简单说明: 设计模式:多年软件开发,总结出来的一套经验.方法和工具 java中有23种设计模式,在ios中最常用的是单例模式和代理模式. 二.单例模式说明 ...
- Matlab实现加性高斯白噪声信道（AWGN）下的digital调制格式识别分类
Matlab实现加性高斯白噪声信道(AWGN)下的digital调制格式识别分类 内容大纲 加性高斯白噪声信道(AWGN)下的digital调制格式识别分类 (1. PSK; 2. QPSK; 3.8 ...
- 替换APK中的jar包文件
[Qboy] 2014年12月21日 这几天,我第一次做的android游戏(WE!青春纪)马上就要上线.上线之前需要把各个渠道的SDK加入到我们游戏中,与渠道进行联运.但是商务很给力,一下子联系了1 ...
- Liunx0000（初步认识）
都要放假了,学习一下吧,毕竟还有课设,虽然我真的懒得看Linux,不想接触这破玩意!各应人的东西! 一.发展趋势 1\无操作系统阶段20s60 2\简单操作系统阶段 3\试试操作系统阶段 4\面向In ...
- Netsharp快速入门(之7) 基础档案(工作区1 向导创建工作区)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 3.5 商品开发 3.5.1 创建部件工作区 3.5.1.1 工作区向导 1.打开平台工具,选择界面管理节点下的部件工作区 ...
- 【Django】Django命令（Manager.py）
django-admin.py startproject mysite 该命令在当前目录创建一个 mysite 目录. django-admin.py这个文件在C:\Python27\Lib\site ...
- URAL 1920 Titan Ruins: the Infinite Power of Magic
大意: 有一张N*N的网格,你每次可以走一步,每格只能走一次,有没有一种方法让走了L步后回到一个距原点1步远的格子? 没有输出Unsuitable device,否则输出Overwhelming p ...
- Effective Java总结
规则1. 用静态工厂方法代替构造器 例子: public class Example { } public class StaticFactory { //valueOf/Of/getInstance ...