学习Jquery是,模仿写了一个原生js实现ajax方法(闭包),代码上加有注释
方法如下:
<script type="text/javascript">
(function(window, undefined) {
var MyJs = new Object();//我的框架
//格式化参数
MyJs.formatParams = function(data) {
var arr = [];
for ( var name in data) {
arr.push(encodeURIComponent(name) + "="
+ encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
return arr.join("&");
};
MyJs.ajax = function(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = MyJs.formatParams(options.data);
// 创建ajax对象
var xhr = null;
//根据不同的浏览器创建ajax对象
if (window.XMLHttpRequest) {//非IE6
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {//IE6及其以下版本浏览器
try {
xhr = new ActiveXObject("MsXML2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
console.error("您的浏览器不支持ajax技术!");
alert('您的浏览器不支持ajax技术!');
}
//判断
if (xhr != null) {
//连接 和 发送
//xhr.open(method, url, async) method:请求方式 url:请求地址 async:同步 false/异步 true
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);//连接服务器
xhr.send(null);//发送请求
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);//连接服务器
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.send(params);//发送请求
}
//监听ajax请求的状态,处理返回数据,每当readyState改变时,就会触发onreadystatechange事件
xhr.onreadystatechange = function() {
//ajaxRequest.readyState
//0:请求未初始化
//1:建立服务器连接
//2:正在发送请求
//3:请求正在处理中
//4:请求处理完毕,并且响应已完成。
if (xhr.readyState == 4) {
//http状态码
//1xx :信息展示
//2xx :成功
//3xx :重定向
//4xx : 客户端错误
//5xx :服务器端错误
var status = xhr.status;
if (status >= 200 && status < 300) {
//responseText:响应返回的主体内容,为字符串类型;
//responseXML:如果响应的内容类型是 "text/xml" 或 "application/xml",这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型;
options.success
&& options.success(xhr.responseText,
xhr.responseXML);//接收响应数据
//console.log(status);
} else {
options.fail && options.fail(status);
}
}
};
}
};
window.MyJs = MyJs;
})(window);
</script>
调用举例:
<script type="text/javascript">
function Testajax() {
MyJs.ajax({
url : "post.action", //请求地址
type : "POST", //请求方式
data : {
uname : "张珊",
age : 20
}, //请求参数
dataType : "json",
success : function(response, xml) {
// 此处放成功后执行的代码
console.log(response);
console.log(xml);
},
fail : function(status) {
// 此处放失败后执行的代码
}
});
}
</script>
java后端:
package com.uwo9.controller;
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 PostServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置编码格式
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 获取请求参数
System.out.println(req.getParameter("uname"));
// 返回ajax响应信息
resp.getWriter().print("你好POST请求");
}
}
谢谢大家!