文章目录
一.简介
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>
/**
* 结果说明:
* 1.发送请求时,页面没有刷新.
* 2. 服务器被调用了
* */
function jsAjax() {
//1.创建一个Ajax引擎对象
var xmlHttpRequest = new XMLHttpRequest();
//2.给Ajax引擎对象绑定事件,监听状态变化
xmlHttpRequest.onreadystatechange = function () {
//状态为4,也就是服务器返回响应的时候,发送响应给客户端
if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
//把服务器返回的响应内容显示到#resultDiv中
document.getElementById("resultDiv").innerHTML = xmlHttpRequest.responseText;
}
};
//3.设置请求的信息,参数分别是: 请求方式 请求资源的路径(相对路径) 是否异步
xmlHttpRequest.open("get", "AjaxServlet_01", true);
//4.发送请求
xmlHttpRequest.send();
}
</script>
</body>
</html>
如果发送请求的时候需要携带数据,那么只需要改变步骤 第3和第4就可以,
get和post的携带请求数据的方式不一样,下面展示携带数据username=zuoyueer&password=123456的实现:
//3.post请求
xmlHttpRequest.open("get", "AjaxServlet_01", true);
//3.1 设置请求头,必须设置,不然无法携带数据
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求,并且挈带数据
xmlHttpRequest.send("username=zuoyueer&password=123456");
// 3. get也可以携带数据,如下
xmlHttpRequest.open("get", "AjaxServlet_01?username=zuoyueer&password=123456", true);
//4.发送请求
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实现
//jQueryAjax_get是某一事件触发时候执行的函数,也就是说事件触发,就发送异步get请求
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实现
//jQueryAjax_post是某一事件触发时候执行的函数,也就是说事件触发,就发送异步post请求
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，post
- dataType：服务端返回的数据格式/类型，常用的text, json
- success： 回调函数function(result){}处理响应结果. 其中result接受服务器响应数据,是形参,按照你自己的习惯取一个名字,我取的是result
- async：是否异步
3.3实现
function jQueryAjax_ajax() {
$.ajax({
url: "AjaxServlet_01",
type: "post",
data: "username=jack&password=123",
//再此我说下我们经常提交的表单数据发送: 定位到form表单,调用serialize()方法系列化表单,注意表单的input标签必须有name属性不然无法序列化该数据
//data:$('#yourformid').serialize(),
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",//即使是get调用,也可以设置成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,我将在下一篇文章种详细介绍.
扫一扫
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
