AjaxRequest.js又一个ajax的小框架

_Yggd

浏览: 85829 次
性别:
来自: 西安

最近访客更多访客>>

dd533

singlesoar

liexusong001

xuyongff

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

ajax 框架 javascript html

版权：JavaIT学习室
转载请表明，http://www.javait.org

AjaxRequest.js文件是一个单独独立出来专门对Ajax请求做处理的JavaScript。使用起来还是比较简单，但是功能肯定要和jQuery、ExtJS4这些JavaScript库有区别。因为AjaxRequest.js文件没有对HTML Document Model进行处理封装的方法，这一点要给大家说明一下。

下面先给出AjaxRequest.js文件的全部源代码结构。大家请参考如下的代码

var net=new Object(); //定义一个全局变量net
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if (!method){
    method="GET";
}
if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.AjaxRequest.onReadyState.call(loader);
      }

      this.req.open(method,url,true);
if(method=="POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
}
}

//重构回调函数
net.AjaxRequest.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==4){
    if (req.status==200 ){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
}
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){
alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态: "+this.req.status);
}
其中最重要的方法就是AjaxRequest.js文件中的构造方法，所有Ajax的请求来调用此构造方法完成。

net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadDate(url,method,params);
}
参数介绍：
（1）url，指定你发送给服务器端的请求地址。
（2）onload，指定当用于处理服务器端返回的数据。如：xml/txt/json。当然onload这个需要自己写JavaScript函数
（3）onerror，指定用于请求服务器失败后的处理。如：400/500/401/404等等HTTP状态码
（4）method，告知请求URL的方式是GET请求还是POST请求
（5）params，发送给服务器端的参数

举个列子告诉大家如何用：
（1）编写一个Ajax.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="JS/AjaxRequest.js"></script>
<script type="text/javascript">
//Ajax：页面无动态刷新技术（异步）
//Ajax的技术特点：JavaScript+XML(JSON)+HTML DOM/CSS DOM
//Ajax技术实现：
//（1）将页面请求发送给服务器端的Java代码，然后此Java代码会传送一个XML/txt/JSON格式的数据到View层
//（2）View层接受Ajax获取到服务端的数据，然后进行解析并将数据显示到页面上
//（3）一定要注意Ajax不会刷新页面就可以看到新的数据显示
//（4）采用AjaxRequest.js这个JavaScript代码来完成Ajax的编写
$ = function(v) {
return document.getElementById(v);
}
function sendMsg() { //用Ajax技术发送消息给服务器
var msg = $("msg").value;
var loader=new net.AjaxRequest("ajaxone.do?msg="+msg,doMsg,onError,"GET");
}
function doMsg() { //接受Ajax返回的消息，然后不刷新页面就显示数据
$("show").innerHTML=this.req.responseText;
}
function onError() { //如果Ajax与服务器通信失败给出一个报错信息
alert("服务器通信失败，请检查服务");
}
</script>
</head>
<body>
<input type="text" value="" id="msg"><input type="button" value="send" onclick="sendMsg()">
<div id="show"></div>
</body>
</html>
（2）一个AjaxServlet.java的服务器端代码

package com.webchart.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class AjaxServlet
*/
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String msg = request.getParameter("msg");
msg = "<font color='red'>"+msg+"</font>";
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(msg); //服务端处理好数据，将数据做出一个txt返回给页面
out.flush();
out.close();
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

}

分享到：

bootstrap————前端的利器,抛除后台开 ... | 万恶的指针--- ---浅谈指针的特点

2013-12-10 20:11
浏览 2062
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论