原生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