版权：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
}
}
分享到：
相关推荐
这篇文章将深入探讨`Ext.Ajax.request`的使用，以及在实际应用中可能遇到的小问题。 首先，`Ext.Ajax.request`的基本语法如下： ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', // 可选值有...
在JavaScript的世界里，ExtJS是一个广泛应用的前端框架，它提供了丰富的组件和强大的数据管理功能。在处理异步和同步请求时，Ext.Ajax是ExtJS中的一个关键组件。标题提到的"ext-basex.js进行Ext.Ajax.request同步...
为了支持这种功能，许多框架都提供了辅助类来简化AJAX请求的操作，其中`Ajax.Request`是一个典型代表。根据给定文件的描述，我们可以得知`Ajax.Request`类是用来发起HTTP请求，并处理服务器响应的工具类。通过它，...
Prototype是一个为JavaScript设计的高性能框架，它提供了一套完整的AJAX类库，包括AJAX.Request和AJAX.Updater，用于创建异步请求和更新页面元素。 3. **Ext JS** Ext JS是一款强大的客户端JavaScript框架，它...
1. 创建XMLHttpRequest对象：这是Ajax的基础，JavaScript会创建一个XMLHttpRequest实例，用来发送HTTP请求。 2. 打开连接：使用`request.open()`方法，通常包含三个参数，分别是HTTP方法（如GET或POST）、请求的URL...
标题中的"spring框架项目+jQueryAjax提交实例"指的是一个整合了Spring框架和jQuery AJAX技术的Web应用程序项目。这个项目提供了一个完整的流程，演示了如何在前端使用jQuery的AJAX功能向后端Spring MVC控制器发送...
Node.js的deft-request框架是JavaScript开发者在进行浏览器端HTTP请求时的一个理想选择，尤其适合那些寻求轻量级解决方案的项目。这个框架以其强大的功能和易用性脱颖而出，旨在简化和统一不同类型的网络请求，包括...
Prototype.js是一个JavaScript库，它为Web开发提供了丰富的功能，特别是针对Ajax交互。Ajax，即异步JavaScript和XML，是一种在不刷新整个页面的情况下更新部分网页内容的技术。Prototype.js通过简化DOM操作、事件...
Prototype.js是一个开源的JavaScript库，由Sam Stephenson于2005年创建。它的设计目标是简化DOM操作，提供面向对象的编程模式，并增强JavaScript的内置对象。Prototype.js的核心理念在于通过增加类和模块化功能，使...
在本例中，我们使用Prototype.js，这是一个轻量级的JavaScript库，提供了丰富的DOM操作接口和Ajax功能，简化了Ajax应用的开发。 Prototype.js库提供了许多方便的函数，如Ajax.Request和Ajax.Updater，它们是执行...
Ajax.updater是Prototype JavaScript库中的一个关键功能，用于实现页面的部分更新，无需刷新整个页面即可获取新数据。这种技术在Web开发中被称为异步JavaScript和XML（Ajax），尽管现在更常见的是与JSON或其他数据...
modulejs是极致模块化的且面向对象的javascript框架，modulejs能让你在简单易用的前提下写出更佳维护性和可重用性的javascript代码。 Features： •HTML document query/traversing/manipulation •Lightweight ...
3. **Ext JS**：Ext JS是一个完整的前端框架，它的Ajax功能主要由`Ext.Ajax`类提供。`Ext.Ajax.request()`方法类似于jQuery的`$.ajax()`，可以定制各种请求参数。此外，它还提供了异步操作的便利性，如`Ext.data....
AjaxRequest离线包是一个针对Web网站开发的工具包，它主要功能是通过异步JavaScript和XML（AJAX）技术来实现网页数据的无刷新更新。这个离线包的目的是为了让开发者在没有网络连接的情况下也能进行相关开发工作，...
在Play框架中，我们可以借助JavaScript库（如jQuery或Vue.js）以及HTTP请求API来实现AJAX功能。 1. **设置Ajax请求**： 在Play框架中，通常使用jQuery或者其他JavaScript库来发起AJAX请求。例如，你可以创建一个...
ExtJS 是一个强大的JavaScript 框架，专用于构建富客户端Web应用程序。它提供了一整套组件、工具和API，使开发者能够创建复杂的用户界面。在ExtJS中，Ajax（异步JavaScript和XML）请求是数据交互的核心部分，用于与...
Prototype是一个JavaScript库，它简化了DOM操作，提供了强大的数组和对象处理功能，并且内置了Ajax类库。使用Prototype，可以更简洁地创建Ajax请求，如： ```javascript new Ajax.Request('url', { method: 'get',...
- **深入框架**：选择一个Ajax框架，如jQuery，学习其API，通过实际项目来练习使用。 ### 4. 小项目示例 1. **实时搜索**：创建一个输入框，当用户输入时，通过Ajax向服务器发送请求，动态显示匹配的搜索结果。 2....
Ext JS是一个功能丰富的JavaScript UI框架，它提供了大量的可重用组件，如表格、面板、菜单、表单等，以及强大的数据绑定和Ajax功能。Ext的Ajax模块是`Ext.Ajax`，提供了发送Ajax请求的方法，并支持异步请求的回调...
2. Prototype：Prototype是一个轻量级的JavaScript库，它的Ajax模块提供了创建Ajax请求的方法，如Ajax.Request和Ajax.Updater，使得开发者能方便地实现动态更新。 3. Dojo：Dojo Toolkit是一个功能强大的JavaScript...