1ajax简介
AJAX简介
AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML）
是指一种创建交互式网页应用的开发技术
改善用户体验，实现五刷新效果
AJAX的优势
不需要插件支持
优秀的用户体验
提高Web程序的性能
减轻服务器和带宽的负担
AJAX的不足
浏览器对XMLHttpRequest对象的支持度不足
破坏浏览器“前进”、“后退”按钮的正常功能
对搜索引擎的支持不足
2ajax基本对象
创建请求对象
XMLHttpRequest是AJAX的基础，表示请求对象。 XMLHttpRequest用于在后台与服务器交换数据。
为了兼容浏览器，需要作判断
代码如下：
请求对象常用方法
方法
描述
open(method,url
,async)
规定请求的类型、URL
以及是否异步处理请求。
1.method：请求的类型；
GET 或 POST
2.url：文件在服务器
上的位置
3.async：true（异步
）或false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST
请求，表示传递的参数，
格式为key1=val1&key2
=val2的查询字符串
setRequestHeader
(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
请求对象常用属性
属性
描述
onreadystatechange
存储函数（或函数名），每当
readyState属性改变时，就会
调用该函数。
readyState
存有 XMLHttpRequest的状
态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
服务器端响应的状态码，例如200表
示成功，404表示未找到页面
发送请求
我们通过请求对象的open()方法， 打开请求
代码如下：
通过GET方式发送请求
代码如下：
如果需要像HTML表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据
代码如下：
跟踪进展和获得响应
请求对象通过就绪状态处理程序通知自身的进展。可以通过将函数的引用指派给请求对象的onreadystatechange属性作为就绪处理程序，从而把这个处理程序建立起来。
代码如下：
通过responseText属性获得响应文本
代码如下：
完整AJAX示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>AJAX</title>
<script src=”../assets/js/jquery-3.1.1.min.js”></script>
</head>
<body>
<script>
var xmlhttp;
if(window.XMLHttpRequest){
//code for IE7 , Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest()
}else {
//code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”,”test.jsp”,true);
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
console.log(xmlhttp.responseText);
}
}
}
xmlhttp.send(null);
</script>
</body>
</html>
3jQuery中ajax的相关函数
serialize( )
此方法根据包装集里所有的成功表单元素，创建正确格式化的、经过URI编码的查询字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>序列化表单值</title>
<script src=”../assets/js/jquery-3.1.1.min.js”></script>
</head>
<body>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).text($(“form”).serialize());
});
});
</script>
<form action=””>
第一个名称: <input type=”text” name=”FirstName” value=”Mickey” /><br>
最后一个名称: <input type=”text” name=”LastName” value=”Mouse” /><br>
</form>
<button>序列化表单值</button>
<div></div>
</body>
</html>
其他序列化方法
$.serializeArray( )
此方法用于把所有成功表单控件的值都收集到对象的数组中（包含控件的名称和值）
$.param( )
此方法是serialize()方法的核心，用来对一个对象数组或对象按照key/value进行序列化。
load()方法
此方法用于将服务器的资源加载到客户端，替换包装集中匹配元素的innerHTML属性值。
load(url, parameters, callback)
第一个参数：字符串，表示服务器端资源的URL
第二个参数：为一个对象，其属性被序列化为正确地编码的参数以便传递到请求里
第三个参数：为一个回调函数，在响应数据已经加载到包装集元素之后被调用
load()方法示例
jQuery中的load()方法为我们封装了AJAX发送的细节，使我们的操作更加方便。如果需要传递参数和添加回调函数，可以使用一下写法：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>通过 AJAX 请求从服务器加载数据</title>
<script src=”../assets/js/jquery-3.1.1.min.js”></script>
</head>
<body>
<script>
$(document).ready(function(){
$(“#btn1″).click(function(){
$(‘#test’).load(‘../assets/doc/
loadPage_text.txt’);
})
})
</script>
<button id=”btn1″ type=”button”>按我吧！</button>
</body>
</html>
get() 和 post()方法
$.get(url, parameters, callback)
以GET形式发送AJAX请求到后台
第一个参数：字符串，将要通过GET方法进行交互的服务器端资源的URL
第二个参数：一个对象，其属性作为名值对用于构造查询字符串并追加到URL
第三个参数：回调函数，在请求完成时被调用。
post()方法的用法和get()方法一样，不同的是发送数据的形式
get()方法示例
下面的例子将文本框的数据序列化，调用get()方法发送到后台，将响应内容显示在div元素中
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>GET</title>
<script src=”../assets/js/jquery-3.1.1.min.js”></script>
</head>
<body>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$.get(“test.jsp”,function(data,status){
alert(“数据: ” data “\n状态: ” status);
});
});
});
</script>
<button>向test.jsp发送一个GET请求</button>
</body>
</html>
ajax()方法
语法：$.ajax(options) ，其中options参数为一个对象，其属性如下表
属性名
描述
url
请求的URL
type
请求的HTTP方法，通常
是GET或POST，默认为GET
data
表示需要发送的请求参数
dataType
一个关键字，这个值决定在
把数据传递给回调函数之前
进行什么后续处理。有效值
有：xml、json、html、
script、text
timeout
设定请求超时时间，以毫秒
为单位
global
启用或禁用所谓全局函数的触发
属性名
描述
contentType
请求的内容类型
success
一个函数，如果请求的
响应指示成功状态码，
则这个函数被调用。
响应内容作为第一个参
数被传递给这个函数
error
一个函数，如果请求的
响应指示错误状态码，
则这个函数被调用。
complete
一个函数。如果也指定了
success或error回调函数，
则这个函数在success或
error回调函数调用之后
被调用
beforeSend
一个函数，在发起请求之
前被调用
async
指定是否为异步请求
ajax()方法示例
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>AJAX方法</title>
<script src=”../assets/js/jquery-3.1.1.min.js”></script>
</head>
<body>
<script>
$(function(){
$(‘#send’).click(function(){
$.ajax({
type : “get”,
async : false,
url :”test.jsp”,
cache : false,
dataType : “jsonp”,
jsonp: “callbackparam”,
jsonpCallback:”jsonpCallback1″,
success : function(json){
alert(json[0].name);
},
error:function(e){
alert(“error”);
}
})
})
});
</script>
</body>
</html>
ajaxSetup()方法
$.ajaxSetup(properties)
用于设置一组默认的AJAX属性，如果不替换值，则使用默认的AJAX属性。
属性的设定和ajax()方法中的参数一致
parseJSON()方法
此方法接受一个JSON格式字符串，返回解析后的对象。
需要注意的是，传入一个畸形的JSON格式字符串会抛出一个异常。比如下面的都是畸形的JSON字符串：
代码如下：
下面我们来看一个简单的例子，通过parseJSON()进行字符串解析：
代码如下：
getJSON()方法
$.getJSON(url, param, callback)
用法与get()和post()方法一样，不同的是要求服务器返回的数据为JSON格式字符串。
返回JSON格式字符串的后台页面：
代码如下：
getJSON()方法示例
客户端代码编写发送AJAX请求解析JSON格式数据
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>载入 JSON 数据</title>
<script src=”../assets/js/jquery-3.1.1.min.js”></script>
</head>
<body>
<script>
function doSend() {
var param = $(“#txtUser”).serialize();
$.getJSON(“test.jsp”,param,function (data) {
$(“#msg”).append(data.name);
$(“#msg”).append(“:”);
$(“#msg”).append(data.age);
})
}
</script>
UserName: <input type=”text” id=”txtUser” >
<input type=”button” value=”send” onclick=”doSend()”>
<div id=”msg” style=”font-weight:bold”></div>
</body>
</html>
本站代码下载方法：
