Ajax在jQuery中的使用

Ajax全称为“Asynchronous JavaScript and XML” (异步JavaScript和XML),它可以使浏览器不刷新而更新页面数据。Ajax的优势:

  1. 不需要插件支持。
  2. 优秀的用户体验。
  3. 提供Web程序的性能。
  4. 减轻服务器和宽带负担。

Ajax过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
console.log(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
console.log(request.status);
}
} else {
// HTTP请求还在继续...
}
}

request.open('GET', '/api/categories');
request.send();

对于低版本的IE,需要换一个ActiveXObject对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
console.log(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
console.log(request.status);
}
} else {
// HTTP请求还在继续...
}
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

如果你想把标准写法和IE写法混在一起,可以这么写。

1
2
3
4
5
6
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}

默认情况下,JavaScript在发送AJAX请求时,URL的域名必须和当前页面完全一致。

完全一致的意思是

  1. 域名要相同 : www.example.com和example.com不同
  2. 协议要相同 : http和https不同
  3. 端口号要相同 默认是:80端口,它和:8080就不同。

如果浏览器支持HTML5,那么就可以一劳永逸地使用新的跨域策略:CORS了。CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。

jQuery中的Ajax

jQuery对AJax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。

load()方法

load()方法是jQuery中最简单和最常使用的Ajax方法,能载入远程HTML代码并插入到DOM中。

1
load(url [, data] [, callback])
参数名称类型说明
urlString请求HTML页面的URL地址
data(可选)Object发送至服务器的key/value数据
callback(可选)Function请求完成时的回调函数,无论请求成功或失败
1
2
3
4
5
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})

load()方法如果有参数,则请求为post方式,否则为get方式

1
2
3
4
5
//无参数,GET方式
$("#resText").load("test.html");

//有参数,POST方式
$("#resText").load("test.php", {name:"rain", age:"22"}, function(){//...});

load()方法的回调函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象。

1
2
3
$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){

});

$.get()和$.post()

1
$.get(url [, data] [, callback] [, type]);
参数名称类型说明
urlString请求的HTML页的URL地址。
data(可选)Object发送至服务器的key/value数据作为QueryString附加到URL中。
callback(可选)Function载入成功时的回调函数。
type(可选)String返回内容格式,包括xml,html,script,json,text和_default

$.post()和$.get()的结构和参数相同,只是提交方式的不同。

$.getScript()和$.getJSON()

有时候在页面初次加载的时候,取得全部的JavaScript是没有必要的。所以jQuery提供了$.getScript()方法来直接加载js文件。

1
2
3
4
5
$(function(){
$("#send").click(function(){
$.getScript('test.js');
})
})

$.getJSON()方法的用法和$.getScript()相同,用于加载json文件。

1
2
3
4
5
$(function(){
$("#send").click(function(){
$.getJSON("test.json");
})
})

$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现。

1
$.ajax(options);

例如:

1
2
3
4
5
6
7
8
9
$(function(){
$('send').click(function(){
$.ajax({
type:"GET",
url:"test.js",
dataType:"script"
})
})
})

serialize()方法

有时候我们的表单很复杂,我们可以使用serialize()方法对一个jQuery对象序列化为字符串。

1
2
3
4
5
$('send').click(function(){
$.get('get1.php', $('#form1').serialize(), function(data, textStatus){
$("#resText").html(data);
})
})

和serialize()方法类似的还有serializeArray()方法。

此外,我们还可以使用serialize()底层的核心方法$.param()方法来对一个数组或对象进行key/value进行序列化。

1
2
3
var obj = {a:1, b:2, c:3}
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3

全局事件

比如在Ajax加载的时候,我们显示一个加载动画。

1
2
3
4
5
6
$("#loading").ajaxStart(function(){
$(this).show();
})
$("#loading").ajaxStop(function(){
$(this).hide();
})

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×