原生js封装ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于建立快速动态网页的手艺。

原生js实现ajax功能本家儿要依靠于window.XMLHttpRequest（非IE浏览器利用）和window.ActiveXObject（IE浏览器利用）来标的目的后台发送请求。

东西/原料

电脑
myeclipse或者eclipse

第一步调：新加一个javaweb项目

1
第一步：利用myeclipse新建javaweb项目。
打开myeclipse file --》new--》web project
具体操作如下图所示：
2
第二步：编写servlet。
package com.test.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 5181663133516569754L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
3
第三步：在web中设置装备摆设servlet。

<servlet>
<servlet-name>testServlet</servlet-name>
<servlet-class>com.test.servlet.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>testServlet</servlet-name>
<url-pattern>/testServlet.do</url-pattern>
</servlet-mapping>

第二步调：编写测试功能代码

1
第一步：编写servlet营业代码。
package com.test.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 5181663133516569754L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 避免呈现乱码的问题
response.setContentType("application/json;charset=utf-8");
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String json = "{'id':" + id + ",'name':'" + name + "','sex':'" + sex
+ "'}";
response.getWriter().print(json);
}
}
2
第二步：编写前端ajax代码。
1、位置：D:\Workspaces\MyEclipse 10\servlet\WebRoot\ajax_js.html
2、具体内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js封装ajax</title>
</head>
<body>
<script>
/* 封装ajax函数
* @param {string}opt.type http毗连的体例，包罗POST和GET两种体例
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
* @param {object}opt.data 发送的参数，格局为对象类型
* @param {function}opt.success ajax发送并领受当作功挪用的回调函数
*/
function ajax(opt) {
//第一步解析请求的属性
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function() {
};
//第二步解析请求参数
var params = [];
for ( var key in opt.data) {
params.push(key + '=' + opt.data[key]);
}
//join方式将数组转为指心猿意马符号的自字符串，如斯处将数组["id=2", "name=李四"]转为"id=2&name=李四"
var postData = params.join('&');
if (opt.url && opt.url.indexOf("?") != -1) {
postData += opt.url.substr(opt.url.indexOf("?") + 1,
opt.url.length);
}
//第三步获取请求的Http对象
var xmlHttp = null;
//若是撑持XMLHttpRequest则利用
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
//若是是IE浏览器则需要利用
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//第四步：发送请求
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
} else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
//第五步：接管请求并回调函数。
xmlHttp.onreadystatechange = function() {
//若是请求竣事，并当作功
// xmlHttp.readyStat是request 状况 0 还没起头 1 读取中 2 已读取 3 咨询交互中 4 一切完当作
//xmlHttp.status是http和谈状况 200标识请求当作功
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
if (xmlHttp.readyState == 4 && xmlHttp.status != 200) {
opt.error(xmlHttp);
}
};
}
//挪用请求
ajax({
method : 'POST',
url : '/testServlet.do',
data : {
id : '3',
name : '小丽',
sex : '女'
},
success : function(response) {
console.log(response);
},
error : function(xmlHttp) {
alert(xmlHttp.status);
}
});
</script>
</body>
</html>
3
第三步：测试。
1、启动tomcat测试servlet是否当作功
http://localhost:8080/servlet/testServlet.do?id=3
2、请求ajax页面
http://localhost:8080/servlet/ajax_js.html
3、若是呈现乱码问题可以参考：
https://jingyan.baidu.com/article/ed2a5d1fa38b6709f6be17ff.html