[jQuery知识]jQuery之知识十一-Ajax初级
前言
1.Ajax 概述
2.load()方法
3..get()和.get()和.post()
Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户 体验。
一.Ajax 概述
Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
- JavaScript,通过用户或其他与浏览器相关事件捕获交互行为;
- XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
- 服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
- 其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其呈现到页面上。
由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
- 不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
- 用户体验极佳(不刷新页面即可获取可更新的数据);
- 提升 Web 程序的性能(在传递数据方面做到按需放松,不必整体提交);
- 减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
而 Ajax 的不足由以下几点:
- 不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
- 前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面);
- 搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);
- 开发调试工具缺乏(相对于其他语言的工具集来说,JS 或 Ajax 调试开发少的可怜)。
异步和同步
使用 Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢?我们普通的 Web 程序开发基本都是同步的,意为执行一段程序才能执行下 一段,类似电话中的通话,一个电话接完才能接听下个电话;而异步可以同时执行多条任务, 感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行,但同步的模式属于阻塞模式,这样会导致多条线路执行时又必须一条一 条执行,会让 Web 页面出现假死状态,所以,一般 Ajax 大部分采用异步模式。
二.load()方法
jQuery 对 Ajax 做了大量的封装,我们使用起来也较为方便,不需要去考虑浏览器兼容性。对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:.ajax(),而通过这层封装了第二层有三种方法:.load()、.ajax(),而通过这 层封装了第二层有三种方法:.load()、.get()和.post(),最高层是.post(),最高层是.getScript()和$.getJSON() 方法。
.load()方法可以参数三个参数:url(必须,请求html文件的url地址,参数类型为String)、 data(可选,发送的 key/value 数据,参数类型为 Object)、callback(可选,成功或失败的回调 函数,参数类型为函数 Function)。
如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。
//HTML
<input type="button" value="异步获取数据" />
<div id="box"></div>//jQuery
$('input').click(function () { $('#box').load('test.html');
});
如果想对载入的 HTML 进行筛选,那么只要在 url 参数后面跟着一个选择器即可。
//带选择器的 url
$('input').click(function () {$('#box').load('test.html .my'); });
如果是服务器文件,比如.php。一般不仅需要载入数据,还需要向服务器提交数据,那 么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式:get 和 post。
//不传递 data,则默认 get 方式$('input').click(function () {$('#box').load('test.php?url=ycku'); });
//get 方式接受的 PHP <?php
if ($_GET['url'] == 'ycku') {
echo '瓢城 Web 俱乐部官网';
} else {
echo '其他网站';
} ?>//传递 data,则为 post 方式 $('input').click(function () {$('#box').load('test.php', { url : 'ycku'
}); });//post 方式接受的 PHP <?php
if ($_POST['url'] == 'ycku') {
echo '瓢城 Web 俱乐部官网';
} else {
echo '其他网站';
} ?>
在 Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。回调函数 也可以传递三个可选参数:responseTex(t 请求返回)、textStatus(请求状态)、XMLHttpRequest (XMLHttpRequest 对象)。
$('input').click(function () { $('#box').load('test.php', {
url : 'ycku'
}, function (response, status, xhr) {alert('返回的值为:' + response + ',状态为:' + status + ',
状态是:' + xhr.statusText);
}); });
注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest 对象属于 JavaScript 范畴,可以调用一些属性如下:
如果成功返回数据,那么 xhr 对象的 statusText 属性则返回’OK’字符串。除了’OK’的状态 字符串,statusText 属性还提供了一系列其他的值,如下:
三..get()和.get()和.post()
.load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀。而.get()和.get()和.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取, 而对于需要传递参数到服务器页面的,.get()和.get()和.post()更加合适。
$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务 器返回的内容格式:包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数, 后面三个为可选参数。
//使用$.get()异步返回 html 类型
$('input').click(function () {$.get('test.php', { url : 'ycku'
}, function (response, status, xhr) { if (status == 'success') {
$('#box').html(response); }
})
});
注意:第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断,并不 需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。
//使用$.get()异步返回 xml
$('input').click(function () {$.get('test.xml', function (response, status, xhr) { $('#box').html($(response).find('root').find('url').text());//type 自动转为 xml
}); });
注意:如果载入的是 xml 文件,type 会智能判断。如果强行设置 html 类型返回,则会 把 xml 文件当成普通数据全部返回,而不会按照 xml 格式解析数据。
//使用$.get()异步返回 json
$.get('test.json', function (response, status, xhr) {alert(response[0].url);
});
.post()方法的使用和.post()方法的使用和.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的 不同,在用户使用上体现不出。具体区别如下:
- GET 请求是通过 URL 提交的,而 POST 请求则是 HTTP 消息实体提交的;
- GET 提交有大小限制(2KB),而 POST 方式不受限制;
- GET 方式会被缓存下来,可能有安全性问题,而 POST 没有这个问题;
- GET 方式通过GET[]获取,POST方式通过_GET[]获取,POST 方式通过_POST[]获取。
//使用$.post()异步返回 html
$.post('test.php', {
url : 'ycku'
}, function (response, status, xhr) {$('#box').html(response); });
继续看下一章[jQuery知识]jQuery之知识体系
[jQuery知识]jQuery之知识十一-Ajax初级相关推荐
- jQuery mobile插件基础知识笔记
一.简介 1.Jquery mobile是针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架. jQuery mobile是一个触控优化的HTML5 UI框架,旨在让所有智能手机.平 ...
- jQuery基础—高级详细知识笔记
jQuery基础 一.概述 1.什么是jQuery? 2.特点 二.jQuery的定义方式 1.如何导入jQuery.js 2.jQuery核心函数 **jQuery核心函数的四个作用:** 3.如何 ...
- jQuery源码分析系列(37) : Ajax 总结
综合前面的分析,我们总结如下3大块: jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求 前置过滤器 jQuery. ajaxPrefilter 请求分发器 jQuery ...
- ajax一次请求多条记录,Jquery 一次处理多个ajax请求的代码
Jquery 一次处理多个ajax请求的代码 复制代码 代码如下: $(document).ready(function () { $('#getsetgo').click(function () { ...
- mvc 一般注释_使用带有注释和JQuery的Spring MVC 3的Ajax
mvc 一般注释 与Ajax一起工作对我来说一直很有趣! 是不是 ? 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用. 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax ...
- 使用带有注释和JQuery的Spring MVC 3的Ajax
与Ajax一起工作对我来说一直很有趣! 是不是 ? 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用. 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax. 和往常一样,我 ...
- 如何让jQuery执行同步而不是异步的Ajax请求?
我有一个提供标准扩展点的JavaScript小部件. 其中之一是beforecreate函数. 它应该返回false以防止创建项目. 我已经使用jQuery在此函数中添加了Ajax调用: before ...
- html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...
使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery) 诚然,Stack Overflow上有类似的问题,但似乎并 ...
- jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
最新文章
- echarts图形报表缓存问题(option数据缓存)
- 图片滤镜算法原理简单讲解
- 配置https后访问返回403 forbidden
- maven实战总结,工作中常见操作
- Mr.J--Vue之v-cloak
- python语言中有3种表示字符串的方式、单引号和_Python中三种类型的引号(单引号、双引号、三引号)...
- JS设计模式——12.装饰者模式
- 述 SQL 中的 distinct 和 row_number() over() 的区别及用法
- ubuntu安装注意事项:
- 拓端tecdat|Python用ARIMA和SARIMA模型预测销量时间序列数据
- c语言上机作业五套含答案,计算机二级C语言上机题库100套(含答案)
- 施努卡:3d视觉检测方案 3d视觉检测应用行业
- TB6560 驱动板资料
- JavaScript对输入的用户名密码等进行判断
- OpenCV学习笔记03:缩放裁剪图像与调整图像色调
- 【架构】分享个人制作《数字档案馆系统总体架构图》
- 摸鱼三天,我写了一个通用的组建树TreeUtil工具
- 网络服务器怎么修改ip,怎么改变自己的IP地址?
- HTML基本知识和常用的标签
- 如何解决win10应用商店打不开——错误码0x80131500
热门文章
- L11.盛最多水的容器
- html5 版街头霸王,html5版街头霸王源码
- 服务器智能导轨,DELL/戴尔R610服务器导轨,动态滑轨,抽屉轨道,
- canvas绘制心电图(js读取csv心电数据文件)
- SSL协议的分析及实现
- [深入研究4G/5G/6G专题-50]: URLLC-16-《3GPP URLLC相关协议、规范、技术原理深度解读》-10-高可靠性技术-1-低编码率编码调制方案MCS与高可靠性DRB
- c语言中(15 7)什么意思,结业考试是什么
- 如何制作有时效期的二维码?
- 电脑怎么编辑图片分辨率?怎么改变照片像素?
- 程序员必须掌握的项目管理工具——甘特图(二)