Ajax的简单封装
Ajax的全称是AsynchronousJavaScriptAndXML
如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX
以及传智播客的视频教程：http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml
其实已经有好多框架对它进行了封装，但是还是有好多时候用到自己封装的
透露一下，本人是宇多田光的听众之一哦！
封装后的代码如下：
文件路径：\web\AjaxRequest.js
/**
* Created by yuki on 2014/5/13.
*
* 用法：
1.新建对象Ajax对象
2.设定带有一个XMLHttpRequest返回参数的回调函数
3.执行execute,传入请求方式，url,是否异步
*
*/
function Ajax()
{
this.xmlHttp = null;
this.responseText = null;
this.callback = null;
}/**
* 执行ajax
*/
Ajax.prototype.execute = function(method, url, async){
this.createXmlHttp();
this.sendUrl(method, url, async);
this.getResponseText();
this.callback();
};/**
* 服务器返回服务器输出的纯文本数据
* @param embed
*/
Ajax.prototype.getResponseText = function(){
// 判断对象的状态
if (this.xmlHttp.readyState == 4) {
// 判断http交互是否成功
if (this.xmlHttp.status == 200) {
// 判断服务器返回的数据
// 获取服务器输出的纯文本数据
this.responseText = xmlHttp.responseText;
}
}
};/**
* 发送url请求
* @param method 取值为GET或POST
* @param url 要发送的url可以带请求参数
* @param async true表示异步，false表示同步
*/
Ajax.prototype.sendUrl = function(method, url, async){
// 注册回调函数
this.xmlHttp.onreadystatechange = this.callback;
// 第三个参数表示同步false或是异步true
this.xmlHttp.open(method, url, async);
// 发送数据，开始和服务器端交互
this.xmlHttp.send();
};/**
* 创建XMLHttpRequest
*/
Ajax.prototype.createXmlHttp = function(){
if (window.XMLHttpRequest) {
this.xmlHttp = new XMLHttpRequest();
// 针对某些特定版本的Mozilla浏览器的BUG修正
if (this.xmlHttp.overrideMimeType) {
this.xmlHttp.overrideMimeType(‘text/xml‘);
}
} else if (window.ActiveXObject) {
// 针对IE6, IE5.5, IE5
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; ++i) {
try {
// 取出控件名进行创建，如果创建成功就终止循环
this.xmlHttp = new ActiveXObject(activexName[i]);
break;
} catch (e) {
// do nothing...
}
}
}
//确认XMLHttpRequest对象创建成功
if (!this.xmlHttp) {
alert(‘XMLHttpRequest对象创建失败！‘);
} else {
alert(‘XMLHttpRequest对象创建成功！‘);
}
};
代码封装好了，怎么使用它呢？
看html页面的代码：
文件路径：\web\AjaxRequest.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title>AjaxRequest</title></head>
<script src="AjaxRequest.js"></script>
<body><div id="div1" style="width:200px; height:200px; background-color: darkgoldenrod"></div>
<script>
var ajax = new Ajax();
ajax.callback = function(){
var responseText = this.responseText;
var div1 = document.getElementById(‘div1‘);
div1.innerHTML = responseText;
};
ajax.execute(‘GET‘, ‘First.jsp‘, true);
</script></body>
</html>
它是要访问服务器的，让jsp为它提供服务吧
文件路径：\web\First.jsp
<%--
Created by IntelliJ IDEA.
User: yuki
Date: 2014/5/13
Time: 23:07
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>HI</title>
</head>
<body><h1>Hello Ajax!</h1>
Date = <%= new java.util.Date() %>
<br></body>
</html>
这样，Ajax的技术就可以是在页面不刷新的情况下，得到服务器的输出了
下面是结果：
更多好文请关注我的博客：
http://www.cnblogs.com/kodoyang/
html --- ajax --- javascript --- 简单的封装,布布扣,bubuko.com