文章目录
一.简介1、什么是AJAX2、AJAX有哪些优点？3、AJAX有哪些缺点？4、原理
二.基本对象的介绍XMLHttpRequest 对象XMLHttpRequest对象的属性XMLHttpRequest对象的方法
三.JavaScript原生实现Ajax1、步骤2、代码实现3、小结
四.jQuery实现Ajax 的3种方式1、get方式1.1特点1.2语法1.3实现
2、post方式2.1特点2.2语法2.3实现
3、ajax方式3.1特点3.2语法3.3实现
4、扩展: jQuery3.0 的GET和POST新增签名方式4.1实现
五.总结
一.简介
1、什么是AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 允许您仅将重要信息发送到服务器而不是整个页面。因此，只有来自客户端的有价值数据才会路由到服务器端。它使您的应用程序具有交互性和更快。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
2、AJAX有哪些优点？
快速回复响应 带宽利用率 在从服务器检索数据之前，不会阻止用户。一个请求阻塞不会影响其他请求,也就是异步请求 它允许我们只将重要数据发送到服务器。它在不重新加载页面的情况下更新数据。 它使应用程序具有交互性和更快速。
3、AJAX有哪些缺点？
取决于JavaScript 安全问题 调试很困难
4、原理
用户从UI发送请求，JavaScript中调用XMLHttpRequest对象。HTTP请求由XMLHttpRequest对象发送到服务器。服务器使用JSP，PHP，Servlet，ASP.net等与数据库交互。检索数据。可能发送阻塞.服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。HTML和CSS数据显示在浏览器上。 总结: 客户端发送的请求,不是直接发送给服务器,而是发送给AJAX引擎,也就是XMLHttpRequest, 客户端接受的响应也不是服务端直接发送的,而是Ajax引擎接受到服务器的响应,经过处理后转发给客户端的. 一次请求阻塞不会影响下一次请求.
二.基本对象的介绍
XMLHttpRequest 对象
MLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。XMLHttpRequest的对象用于客户端和服务器之间的异步通信。
它执行以下操作：
在后台从客户端发送数据从服务器接收数据更新网页而不重新加载。
XMLHttpRequest对象的属性
属性描述
onreadystatechange存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。readyState存有的XMLHttpRequest的状态从0到4发生变化。0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪reponseText以文本形式返回响应。responseXML以XML格式返回响应status将状态返回为数字（例如，“Not Found”为404，“OK”为200）statusText以字符串形式返回状态（例如，“Not Found”或“OK”）
XMLHttpRequest对象的方法
方法描述
abort()取消当前请求。getAllResponseHeaders()以字符串形式返回完整的HTTP标头集。getResponseHeader( headerName )返回指定HTTP标头的值。void open（method，URL）打开指定获取或交的方法和URL的请求。void open（method，URL，async）与上面相同，但指定异步或不。void open（method，URL，async，userName，password）与上面相同，但指定用户名和密码。void send（content）发送获取请求。setRequestHeader（ label，value）将标签/值对添加到要发送的HTTP标头。
三.JavaScript原生实现Ajax
1、步骤
）创建Ajax引擎对象
）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
）绑定提交地址
）发送请求
）接受响应数据
2、代码实现
<!DOCTYPE html
>
<html lang
="en">
<head>
<meta charset
="UTF-8">
<title>js的Ajax
</title
>
</head
>
<body>
<input type
="button" value
="点击发送ajax请求" onclick
="jsAjax()">
<div id
="resultDiv">
在这里显示服务器响应结果
</div
>
<script>
function
jsAjax() {
var xmlHttpRequest
= new XMLHttpRequest();
xmlHttpRequest
.onreadystatechange
= function
() {
if (xmlHttpRequest
.readyState
=== 4 && xmlHttpRequest
.status
=== 200) {
document
.getElementById("resultDiv").innerHTML
= xmlHttpRequest
.responseText
;
}
};
xmlHttpRequest
.open("get", "AjaxServlet_01", true);
xmlHttpRequest
.send();
}
</script
>
</body
>
</html
>
如果发送请求的时候需要携带数据,那么只需要改变步骤 第3和第4就可以, get和post的携带请求数据的方式不一样,下面展示携带数据username=zuoyueer&password=123456的实现:
xmlHttpRequest
.open("get", "AjaxServlet_01", true);
xmlHttpRequest
.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttpRequest
.send("username=zuoyueer&password=123456");
xmlHttpRequest
.open("get", "AjaxServlet_01?username=zuoyueer&password=123456", true);
xmlHttpRequest
.send();
3、小结
我们可以看到,以上代码有很多是固定不变的,那么多次请求,都要写这些固定代码,就会造成代码冗余严重 , 因此实际开发中,JS原生实现Ajax是不会使用的,因为太麻烦了,我们有简单的方法,那就是JQuery的实现.
四.jQuery实现Ajax 的3种方式
1、get方式
1.1特点
GET请求具有以下的几个特点：
GET请求可被缓存GET请求保留在浏览器历史记录中GET请求可被收藏为书签GET请求不应在处理敏感数据时使用GET请求有长度限制GET请求只应当用于取回数据
1.2语法
GET方式的请求: $.get(url, data, callback, type) 其中url是必须的,其他根据需求选择.
参数名称解释
url请求的服务器端url地址data发送给服务器端的请求参数，格式可以是key=value，也可以是js对象callback当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码type预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
1.3实现
function
jQueryAjax_get() {
$
.get("AjaxServlet_01", "username=jack&password=123", function
(result
) {
$
("#resultDiv").html(result
);
}, "text");
}
2、post方式
2.1特点
POST请求的特点如下：
POST请求不会被缓存POST请求不会保留在浏览器历史记录中POST请求不能被收藏为书签POST请求对数据长度没有要求
2.2语法
POST方式的请求: $.post(url, data, callback, type) 其中url是必须的,其他根据需求选择.
参数名称解释
url请求的服务器端url地址data发送给服务器端的请求参数，格式可以是key=value，也可以是js对象callback当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码type预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
2.3实现
function
jQueryAjax_post() {
$
.post("AjaxServlet_01", "username=jack&password=123", function
(result
) {
$
("#resultDiv").html(result
);
}, "text");
}
3、ajax方式
3.1特点
ajax的特点如下：
可以动态选择get或者post方式发送请求功能比前2种方式,更加强大
3.2语法
ajax方式的请求: $.ajax({key:value, key:value,...})其中每个key就一个配置项
常用配置项有：
url：请求资源的路径data：提交的表单参数，格式有两种：
键值对形式: name=value&name=value&…js对象形式 {name:value, name:value, …} type：请求方式，常用的get，postdataType：服务端返回的数据格式/类型，常用的text, jsonsuccess： 回调函数function(result){}处理响应结果. 其中result接受服务器响应数据,是形参,按照你自己的习惯取一个名字,我取的是resultasync：是否异步
3.3实现
function
jQueryAjax_ajax() {
$
.ajax({
url
: "AjaxServlet_01",
type
: "post",
data
: "username=jack&password=123",
async
: true,
success
: function
(result
) {
$
("#resultDiv").html(result
);
},
dataType
: "text"
});
}
4、扩展: jQuery3.0 的GET和POST新增签名方式
大白话就是:前2种get和post方式都能使用ajax方式中的语法来写! 从而增强post和get的功能,实际很少用
4.1实现
function
jQueryAjax_get2() {
$
.get({
url
: "AjaxServlet_01",
async
: true,
success
: function
(result
) {
$
("#resultDiv").html(result
);
},
type
: "post",
dataType
: "text"
});
}
function
jQueryAjax_post2() {
$
.post({
url
: "AjaxServlet_01",
data
: "name=zuoyueer&age=23",
dataType
: "text",
type
: "post",
success
: function
(result
) {
$
("#resultDiv").html(result
);
},
async
: true
});
}
五.总结
虽然Ajax是异步JavaScript和xml技术,但是现实是xml已经淘汰了,真正的优秀项目,都使用json作为数据传输的格式,JavaScript原生实现Ajax异步请求的方式,代码冗余,实际是不会去使用的,而是使用jQuery的3种方式,jQuery的本质就是js, 只不过封装了具体实现,简化了代码.程序员使用起来方便高效jQuery的3种方式种,前2种,就是名字不一样,一个是get一个是post,参数都一样. 当然他们发生的请求自然也不一样jQuery的第三种ajax方式的属性对([配置项)远远不止我写的那几个, 我写的那几个是经常用到的,其他的可以配置项可以自己去找资料,我这里就不赘述了.新增的签名方式,实际上就是get和post使用了配置项的语法,使得功能更加强大,使用更加灵活, 因为配置项的顺序是可以随便的,至于3种方式使用哪种,那就看需求和个人习惯了,就我个人比较喜欢第3种方式,因为灵活多变,避免以后项目增加功能导致修改麻烦.json作为数据传输的格式取代了xml,我将在下一篇文章种详细介绍.
