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() 方法从服务器加载数据，并把返回的数据放入被选元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.1.js"></script>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#content").load("resource/book.xml");
})
})
</script>
<body>
<div id="content"><h3>演示ajx</h3></div>
<button>点击</button>
</body>
</html>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
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 对象的函数。 |
ajax之深入解析（2）的更多相关文章
- ajax返回数据解析总结
ajax即异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 ...
- ajax的原理解析
一.关于同步与异步的分析: 异步传输是面向字符的传输,它的单位是字符:而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的.而ajax就是采用的异步请求方式的. ...
- phpStudy4——前端页面使用Ajax请求并解析php返回的json数据
项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...
- jQuery ajax 流程全解析
实例解析java + jQuery + json工作过程(登录) 本文主要讲解在java环境下使用jQuery进行JSON数据传送的交互过程 参考根据作者的账务管理系统(个人版) 源码下载 讲解 一. ...
- ajax之深入解析（1）
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJ ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- 转：jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- 【JavaScript】jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是 ...
- jquery ajax获取和解析数据
最近项目中用到了ajax技术,之前虽然写过一点点,但是没有系统的总结过.趁着刚刚用过,手热就记录一下,方便以后查阅. $.ajax中的参数 $.ajax的函数格式: $.ajax({ type: 'P ...
随机推荐
- [HAOI2006]受欢迎的牛 tarjan缩点 + 拓扑排序
---题面--- 题解: 首先tarjan缩点应该还是容易想到的,因为喜爱具有传递性,所以一个强联通分量里面的点实际上是全部等效的,所以我们可以缩成一个方便判断, 缩完点之后整张图就变成了一个有向无环 ...
- 详解利用ELK搭建Docker容器化应用日志中心
概述 应用一旦容器化以后,需要考虑的就是如何采集位于Docker容器中的应用程序的打印日志供运维分析.典型的比如SpringBoot应用的日志 收集.本文即将阐述如何利用ELK日志中心来收集容器化应用 ...
- apply的理解和数组降维
func.apply(thisObj, [argArray] ); apply方法用来改变函数执行时的this指向,后面的参数是一个类数组对象,可以是数组,arguments,甚至一个有length属 ...
- 51nod 1275 连续子段的差异（twopointer+单调队列）
对于每一个i找到最近的j满足最大值-最小值>K,对答案的贡献为j-i,用单调队列维护最值即可 #include<iostream> #include<cstdlib> # ...
- BUG：Open quote is expected for attribute "{1}" associated with an element type "id".
BUG原因:Mybatis的xml文件中id缺少双引号: 正确的应该是:
- Linux上读取文件
Linux上读取文件的方法: #!/bin/bash # This is a script for test exec CONFIG_FILE=$ #该脚本传一个文件名为参数 FILE_NO= ech ...
- STL之四：list用法详解
转载于:http://blog.csdn.net/longshengguoji/article/details/8520891 list容器介绍 相对于vector容器的连续线性空间,list是一个双 ...
- [转载]系统管理：update-alternatives
http://blog.csdn.net/dbigbear/article/details/4398961 好吧,其实博主也是转载的. update-alternatives --display | ...
- 手脱ASProtect v1.23 RC1(有Stolen Code)之以壳解壳
1.载入PEID ASProtect v1.23 RC1 2.载入OD,不勾选内存访问异常,其他异常全部勾选 > 01C06D00 push SoWorker.006DC001 ; //入口点 ...
- Fixed: The Windows Process Activation Service service terminated with the following error: The system cannot find the file specified
I'm not yet clear what I did, but I'm blogging it so it can be found if someone else has this issue. ...