电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到原生js封装ajax的问题，如果我们遇到了原生js封装ajax的情况，该怎么处理怎么才能解决原生...
电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到原生js封装ajax的问题，如果我们遇到了原生js封装ajax的情况，该怎么处理怎么才能解决原生js封装ajax带来的困扰呢，对于这样的问题其实我们只需要电脑myeclipse或者eclipse第一步：使用myeclipse新建javaweb项目。打开myeclipse file --》new--》web project具体操作如下图所示：第二步：编写servlet。package com.test.servlet;import java.io.IOException;import javax.servlet.ServletException;im这样就解决了这样的问题，接下来给大家带来原生js封装ajax的详细操作步骤。
工具/原料
电脑
myeclipse或者eclipse
第一步骤：新加一个javaweb项目
第一步：使用myeclipse新建javaweb项目。
打开myeclipse file --》new--》web project
具体操作如下图所示：
第二步：编写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 {
}
}
第三步：在web中配置servlet。
<!-- 配置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>
<!-- 配置servlet 结束-->
第二步骤：编写测试功能代码
第一步：编写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);
}
}
第二步：编写前端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>
第三步：测试。
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
注意事项
jdk 1.6 myeclipse 2010
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
