什么是Ajax及其底层实现

48 阅读 0 评论 32 点赞

我是靠谱客的博主冷酷歌曲，最近开发中收集的这篇文章主要介绍什么是Ajax及其底层实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、什么是Ajax？

　总的来说：
　　Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术，是异步刷新技术，用来在当前页面内响应不同的请求内容。(Ajax并非一种新的技术，而是几种原有技术的结合体（css、html、js、xmlHttpRequest…）。)

　专业术语：

 - Ajax = 异步 JavaScript 和 XML。
- Ajax 是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

2、为什么需要Ajax

　需求：
　　有的时候我们需要将本次的响应结构和前面的响应结果内容在同一个页面中展示给用户。

　解决：
　　1、原始：在后台服务器端将多次响应的内容重新拼接成一个jsp页面，响应，但是这样会造成很多响应内容被重复响应，资源浪费。
　　2、使用Ajax技术，实现响应局部内容（异步刷新技术）。

3、Ajax底层实现

　1、Ajax访问原理
　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

　2、Ajax的基本使用流程（下面的底层代码有详细内容）

创建Ajax引擎对象(XmlHttpRequest、ActiveObject)
复写onreadystatement函数(状态码、响应状态码的使用，操作Dom对象)
发送请求（get/post，参数传递）

　3、Ajax的状态码（readyState）和响应状态码(status)
　Ajax状态码：
　　运行Ajax所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为Ajax运行步骤。如：正在发送，正在响应等，由 Ajax对象与服务器交互时所得 ajax.readyState：0，1，2，3，4
　　0 -(未初始化)还没有调用send()
　　1 - (载入)已调用send()方法，正在发送请求
　　2 - (载入完成)send()方法执行完成
　　3 - (交互)正在解析响应内容
　　4 - (完成)响应内容解析完成，可以在客户端调用了对于上面的状态，其中“0”状态是在定义后自动具有的状态码值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。
　　这就是我们在使用Ajax时为什么采用下面的方式判断所获得的信息是否正确的原因。
　　if(ajax.readyState == 4 && ajax.status == 200) { console.log('sucess');}

　Ajax响应状态码：
　　无论Ajax访问是否成功，由http协议根据所提交的信息，服务器所返回的http头信息代码，该信息使用“ajax.status”所获得（常见的是200成功，404页面找不到）
　　总的来说：status体现的是服务器对请求的反馈，而readystate表明客户端与客户的交互状态过程。
　　
　4、Ajax的异步和同步
　　同步的意思是当js代码加载到当前Ajax的时候会把页面里所有的代码停止加载，页面出现假死状态(等待Ajax执行完)，当这个Ajax执行完毕后才会继续运行其他代码页面假死状态解除。
　　异步则这个Ajax代码运行中的时候其他代码一样可以运行。
　　 jquery的async:false/true,这个属性默认是true：异步。,false：同步。一般使用默认的异步。

　5、Ajax的请求
　get：
　　get是最常见的请求类型，最常用于向服务器查询某些信息，它适用于当url完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。
使用get方式发送请求时，数据被追加到open()方法中url的末尾
　　ajax.open(type,url,async)type：请求方式,url：请求地址，async：异步/同步
　　ajax.open("get","AjaxServlet?username=zhangsan&password=333")
　post：
　　使用频率仅次于get的是post请求，通常用于服务器发送应该被保存数据。“post"方法常用于html表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同url的重复post请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求
　　post请求应该把数据作为请求的主体提交，而GET请求传统上不是这样。post请求的主体可以包含非常多的数据，而且格式不限。在open()方法第一个参数的位置传入"post”，就可以初始化一个post请求
　　ajax.open("post","AjaxServlet");
　　注意post的方式传数据必须设置请求头,很多人写底层Ajax会漏掉这行代码
　　ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
　　接下来要以适当的格式创建一个字符串，并使用send()方法发送
　　ajax.send("username=zhangsan&password=333");
　　
6、Ajax的底层实现代码

　测试页面 ajax.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax底层实现</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/ajax.js" ></script>
</head>
<body>
<button id='ajaxGet'>ajax技术 get请求</button>
<button id='ajaxPost'>ajax技术 post请求</button>
<hr/>
<span id='span'></span>
</body>
</html>

　AjaxServlet：

package com.demo.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 功能：ajax底层实现
* 时间：2018-12-9
* @author
*
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置请求编码
request.setCharacterEncoding("utf-8");
//设置响应编码格式
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取请求信息
String username = request.getParameter("username");
String password = request.getParameter("password");
//处理请求信息
//响应请求信息
response.getWriter().write("username:"+username+",password:"+password);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

　ajax.js：

$(function() {
//get请求方式
$('#ajaxGet').on("click",function() {
console.log('get');
//获取ajax引擎对象
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {//ie比较特殊
ajax = new ActiveObject("Msxm12.XMLHTTP");
}
//复写onreadyStatement函数 当ajax状态值发生改变时 函数就会被触发事件onreadystatechange
ajax.onreadystatechange = function() {
//判断ajax状态值
if (ajax.readyState == 4) {
//判断ajax状态码
if (ajax.status == 200) {
//获取响应内容（响应内容的格式）
var result = ajax.responseText;
//获取元素对象、处理响应内容（js操作dom）
console.log(result);
$('#span').text(result);
}
}
}
//发送get请求
ajax.open("get","AjaxServlet?username=zhangsan&password=333");
ajax.send(null);
});
//post的请求方式
$('#ajaxPost').on("click",function() {
console.log('post');
//获取ajax引擎对象
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {//ie比较特殊
ajax = new ActiveObject("Msxm12.XMLHTTP");
}
//复写onreadyStatement函数
ajax.onreadystatechange = function() {
//判断ajax状态值
if (ajax.readyState == 4) {
//判断ajax状态码
if (ajax.status == 200) {
//获取响应内容（响应内容格式）
var result = ajax.responseText;
//获取元素对象、处理响应内容（js操作dom）
console.log(result);
$('#span').text(result);
}
}
}
//发送post请求
ajax.open("post","AjaxServlet");
//设置请求头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//传递参数
ajax.send("username=zhangsan&password=333");
});
})

4、封装自己的Ajax

　测试页面 myAjax.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax底层实现</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/myAjax.js" ></script>
<script type="text/javascript" src="js/myAjaxu.js" ></script>
</head>
<body>
<button id='ajaxGet'>ajax技术 get请求</button>
<button id='ajaxPost'>ajax技术 post请求</button>
<hr/>
<span id='span'></span>
</body>
</html>

　封装好的myAjax.js：

/**
* method:请求方法，值为get/post
* url:请求地址
* data:请求数据，没有值需要传入null,有值则传入字符串数据，格式为"a=1&b=2"
* deal200:接受一个带有一个形参的js函数对象，形参接收的实参是ajax引擎对象
* deal404:接受一个带有一个形参的js函数对象(后面还有500等等)
*
*/
function myAjax(method, url, data, deal200, deal404, async) {
console.log("调用success");
//获取ajax引擎对象
var ajax = getAjax();
//复写onreadyStatement函数
ajax.onreadystatechange = function() {
//判断ajax状态值
if (ajax.readyState == 4) {
//判断ajax状态码
if (ajax.status == 200) {
if (deal200) {
deal200(ajax);
}
} else if (ajax.status == 404) {
if (deal404) {
deal404(ajax);
}
}
}
}
//发送请求
if("get" == method) {
ajax.open("get",url+(data == null ? "" : "?")+data,async);
ajax.send(null);
} else if ("post" == method) {
//发送请求
ajax.open("post",url,async);
//设置请求头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//参数传递
ajax.send(data);
}
};
//获取ajax引擎对象函数
function getAjax() {
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {//ie比较特殊
ajax = new ActiveObject("Msxm12.XMLHTTP");
}
return ajax;
};

　测试js myAjax.js：

$(function() {
//get请求方式
$('#ajaxGet').on("click",function() {
//获取请求数据(我这没连接数据库，自己给了两个请求数据)
var data = "username=zhangsan&password=333";
myAjax("get","AjaxServlet",data,function(ajax) {
//获取响应信息
var result = ajax.responseText;
//处理响应信息
$('#span').text(result);
});
});
//post请求方式
$('#ajaxPost').on("click",function() {
//获取请求数据(我这没连接数据库，自己给了两个请求数据)
var data = "username=zhangsan&password=333";
myAjax("post","AjaxServlet",data,function(ajax){
//获取响应信息
var result = ajax.responseText;
//处理响应信息
$('#span').text(result);
});
});
})

当用Jquery封装好的js时不要加 $(function(){})文档加载,因为你在另一个js文件调用相关的方法，会使用 $(function(){})，此时会把封装好的js给覆盖了，千万得注意。

注：自己的处女作，欢迎转载！今后我会带来更多的有用的文章，come on boy！