jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3)
6.jQuery的Ajax插件
源码地址:
https://github.com/iyun/jQueryDemo.git
————————————————————————————
6.0 jQuery ajax
浏览器给我们提供的XMLHttpRequest的作用是来发送http请求。
js代码发送一个http的请求
XMLHttpRequest的四步:创建对象、注册监听、建立连接、发送数据
异步交互的6个方法(发送http请求)
ajax();(最底层)
get(),post(),load();(底层)
getScript(),getJSON;(上层)
$.get() (或$.post()) 方法
1、`$.get()` 方法使用 GET 方式来进行异步请求. 它的结构是: `$.get(url[, data][, callback][, type]);`
2、$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
3、方法的返回值:XMLHttpRequest对象
4、$.get() 和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
load()方法
1、load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。
2、它的结构是: load(url[, data][,callback])
3、程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
4、传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
5、对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
6、方法的返回值是 jQuery
7、如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
$.getScript()方法
1、有时候,在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时,动态创建
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论:</div>
<div id="resText" >
</div>
</body>
<script language="JavaScript">
$(function(){
$('#send').click(function() {
$.getScript('test.js',function(){
$('#resText').html(html);
});
});
})
</script>
$.getJSON()方法
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论:</div>
<div id="resText" >
</div>
</body>
<script language="JavaScript">
$(function(){
$('#send').click(function() {
$.getJSON('test.json', function(data) {
$('#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
})
})
})
</script>
序列化元素
1、在客户端与服务器端进行通信时,常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时,处理比较方便。但在真实项目中,往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。
2、serialize()方法
该方法作用于一个jQuery对象,可以将DOM元素内容序列化为字符串。方便客户端发送请求。
3、serializeArray()方法
该方法作用于一个jQuery对象,可以将DOM元素内容序列化为JSON数据格式。
注:此方法返回的是JSON对象而非JSON字符串。
JQuery 加载并解析 XML
1、JQuery 可以通过 $.get()
或 $.post()
方法来加载 xml.
$(function(){
$.get("cities.xml",function(xml){
alert(xml);
});
})
2、JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
最新文章
- SQL Server 致程序员(容易忽略的错误)
- DevExpress XtraPivotGrid 交叉表 重复显示问题
- poj3233 矩阵等比数列求和 二分
- GNU风格 ARM汇编语法指南
- Could not find the Visual SourceSafe Internet Web Service connection information for the specified database Would you like to launch the Visual sourceSafe connection wizard?
- IOS 图片轮播实现原理 (三图)
- phpStudy Linux安装集成环境 (CentOS--7)
- 3-Highcharts 3D图之3D柱状图分组叠堆3D图
- 安卓Design包之Toolbar控件的使用
- Volly的使用及图片错位优化
- UCS-2和UTF8的四个新知识点和新的疑问
- linux 声音大小调整的命令
- poj1703--Find them, Catch them(并查集应用)
- Android设备唯一码的获取
- Vim手册
- centos 查找命令的可用包/命令属于哪个软件包
- Xenserver7.6修改root密码
- [转]access 标准表达式中数据类型不匹配
- 怎样删除windows.old文件
- WINNER队成立(第二天)
热门文章
- 入口文件 index.php
- (C/C++学习)9.C/C++优化排序
- Highcharts教程--把js代码从html中抽离出来,放到单独的一个js文件中。由html页面调用
- 修改bash命令提示符
- 【郑轻邀请赛 I】这里是天堂!
- 2017 Multi-University Training Contest - Team 4 Classic Quotation
- 津津的储蓄计划 2004年NOIP全国联赛提高组
- JLOI2018 记
- angular5 httpclient的示例实战
- Spark 颠覆 MapReduce 保持的排序记录