版权: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.οnlοad=onload;
this.οnerrοr=(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.οnlοad=onload;
this.οnerrοr=(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" οnclick="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
}
}
转载请表明,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.οnlοad=onload;
this.οnerrοr=(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.οnlοad=onload;
this.οnerrοr=(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" οnclick="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
}
}