ajax之深入解析(2)
我们前面实现了用原生的JavaScript代码实现ajax的异步数据传输。接下来,我们再使用一个流行的js框架jQuery来实现ajax。
通过 jQuery AJAX 方法,我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON,同时,我们能够把这些外部数据直接载入网页里的被选元素中。在使用jQuery时,我们需要在网页中引入jQuery的脚本文件。jQuery有两个显著特点,即隐式迭代和链式编程,jQuery可以用$符号表示,出现jQuery的地方可以使用$符号代替。
下面的表格列出了所有的 jQuery AJAX 方法:
方法 | 描述 |
---|---|
$.ajax() | 执行异步 AJAX 请求 |
$.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 |
$.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
$.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
$.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
$.param() | 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串) |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
ajaxError() | 规定 AJAX 请求失败时运行的函数 |
ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
serialize() | 编码表单元素集为字符串以便提交 |
serializeArray() | 编码表单元素集为 names 和 values 的数组 |
我们选择上述列表中的若干方法予以介绍。
jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/jquery-1.11.1.js"></script> 7 </head> 8 <script> 9 $(document).ready(function(){ 10 $("button").click(function(){ 11 $("#content").load("resource/book.xml"); 12 }) 13 }) 14 </script> 15 <body> 16 <div id="content"><h3>演示ajx</h3></div> 17 <button>点击</button> 18 </body> 19 </html>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
1 $("button").click(function(){ 2 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ 3 if(statusTxt=="success") 4 alert("外部内容加载成功!"); 5 if(statusTxt=="error") 6 alert("Error: "+xhr.status+": "+xhr.statusText); 7 }); 8 });
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
$("button").click(function(){$.get("demo_test.jsp",function(data,status){alert("数据: " + data + "\n状态: " + status);}); });
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$("button").click(function(){$.post("/try/ajax/demo_test_post.jsp",{name:"lzy",pwd:"haha"},function(data,status){alert("数据: \n" + data + "\n状态: " + status);}); });
ajax() 方法用于执行 AJAX(异步 HTTP)请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值:
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
转载于:https://www.cnblogs.com/lizhangyong/p/8385426.html
ajax之深入解析(2)相关推荐
- jQuery Ajax 实例 全解析(转)
jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
- jq ajax xml,jQuery+ajax读取并解析XML文件的方法
本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: zhangsan 1 lisi 2 demo.html: /p> " ...
- jQuery Ajax 实例 全解析(转载)
jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
- ajax 返回xml 怎么显示显示图片,如何使用jquery和ajax读取,解析和显示xml
我想读取,解析并显示使用jquery和ajax的xml文件.但同时尝试这样做,我得到一个错误,因为我无法解析XML,而如何使用jquery和ajax读取,解析和显示xml 这是我的代码. $(docu ...
- 前端-Ajax和JSON解析数据
Ajax和JSON解析数据 1,.json 文本端存放数据 // .json 文本端先存放数据 // stars.json [{"champion_name":"洛&qu ...
- 【Ajax】第一课 Ajax访问Servlet解析Json格式
概念 ajax(Web数据交互方式),Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett ...
- 【AJAX】AJAX技术详细解析以及实例
Ajax技术介绍: 全称: Asynchronized(异步) JavaScript And Xml 技术组成有: Javascript.DOM.CSS 和 XMLHttpRequest AJAX ...
- 爬虫之爬取知乎下某个问题下的全部图片(处理AJAX请求,解析json数据)
(直接需要代码的看最后面,前面只是分析) 当你查看知乎某个问题的答案时,通过普通的方法爬取页面,你发现只能爬取一页的内容,当你点击下一页时,浏览器地址并没有发生变化,这种技术叫做AJAX,每次载入的只 ...
- 【JavaScript】jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
最新文章
- 打破情感分类准确率80分天花板!更充分的知识图谱结合范式
- 用python画玫瑰花代码-用python画一朵玫瑰给你
- hive 在kettle 作业return code 2 的问题 Unexpected exception: Unexpected exception: Unexpected exception:
- Jenkins部署Python项目实战
- 强化学习(九)Deep Q-Learning进阶之Nature DQN
- 【软考-软件设计师】程序设计语言基础知识框架
- 自动undo管理下如何添加和删除回滚段
- Java有序表查找:折半查找、二分查找、差值查找和斐波那契查找
- Linux inode 详解
- Golang预备知识
- Android 开发常用ADB命令集合
- java pkcs8_java中公钥,私钥,pkcs1格式,pkcs8格式互转
- android app安装apk,Android App更新安装APK
- win10启动修复_高手教你怎样在Win10上修复主引导记录(MBR),轻松解决启动故障...
- 必须精力充沛,才扛得住世事艰难
- linux下rtc时间不准,Linux中系统时间和RTC时间的关系
- 苍蓝誓约服务器一直维护,《苍蓝誓约》11月26日09:30停服维护公告
- 破解版XMind图文安装教程
- java高级人员必读十大书籍!
- 计算机网络基础——应用层(上云必看)
热门文章
- java dao 单元测试_Spring Service、Dao进行Junit单元测试
- c语言中二维数组中产生随机数,C语言中是如何进行随机数生成的[多图]
- 十八、PHP框架Laravel学习笔记——模型的增删改
- LeetCode 1985. 找出数组中的第 K 大整数(排序)
- LeetCode 1792. 最大平均通过率(优先队列)
- 使用RNN预测文档归属作者
- LeetCode LCP 12. 小张刷题计划(二分查找)
- LeetCode 1334. 阈值距离内邻居最少的城市(最短路径Dijkstra)
- linux防火墙 33001端口,Linux操作系统下IPTables配置方法详解
- python自动复制_Python自动复制日志,python,拷贝