ajax实例化（如何用ajax返回请求重构）

本文目录

• 如何用ajax返回请求重构
• 关于Ajax+JSP的问题
• 怎么用AJAX
• ajax的一些问题

如何用ajax返回请求重构

Ajax重构大致可以分为以下3三个步骤。

一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码

具体代码如下：

 view plain copy

• var net = new Object();  // 定义一个全局的变量  

• // 编写构造函数  

• 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)   // 设置默认的请求方式为GET  

• {  

• method =“GET”;                                                               

• }  

• if(window.XMLHttpRequest)  

• {                                                   // 非IE 浏览器  

• this.req = new XMLHttpRequest();   // 创建XMLHttpRequest 对象                                           

• }   

• else if(window.ActiveXObject)  

• {                                       // IE 浏览器  

• try  

• {  

• this.req = new ActiveXObject(“Microsoft.XMLHTTP”);    // 创建XMLHttpRequest 对象  

• }   

• catch(e)  

• {  

• try  

• {  

• this.req = new ActiveXObject(“Msxml2.XMLHTTP”); // 创建XMLHttpRequest 对象  

• }   

• catch(e)  

• {  

• }  

• }  

• }  

• 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”)  

• {                // 如果提交方式为POST  

• this.req.setRequestHeader(“Content-Type”,“application / x-www-form-urlencoded”);    // 设置请求的内容类型  

• this.req.setRequestHeader(“x-requested-with”,“ajax”);    // 设置请求的发出者  

• }  

• 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);  

• }  

二 在需要应用Ajax 的页面中应用以下的语句包括步骤一中创建的JS 文件

《script language =“javascript”src =“AjaxRequest.js”》 《/ script》

三 在应用Ajax 的页面中编写错误处理的方法,实例化Ajax 对象的方法和回调函数

具体代码如下：

 view plain copy

• 《script language =“javascript”》  

• / ****************** 错误处理的方法*************************** *********** /  

• function onerror()  

• {  

• alert(“ 您的操作有误！”);  

• }  

• / ****************** 实例化Ajax 对象的方法*********************** ****** /  

• function getInfo()  

• {  

• var loader = new net.AjaxRequest(“getInfo.jsp？nocache =”+ new Date().getTime(),deal_getInfo,onerror,“GET”);  

• }  

• / ************************ 回调函数*********************** *************** /  

• function deal_getInfo()  

• {  

• document.getElementById(“showInfo”).innerHTML = this.req.responseText;  

• }  

• 《/ script》  

关于Ajax+JSP的问题

首先先别用AJAX请求，直接用form提交到servlet看看配置对不对成功后再加上AJAX另外，不要太迷信书本，书上也可能有错的地方 看了下，全是小错误！！！！！！！！！！！！！！！！！！！1.xmlHttp=newActiveXObject("Microsoft.XMLHttp");//创建XMLHttpRequest对象xmlHttp=new ActiveXObject("Microsoft.XMLHttp");少了个空格！！！！！！！！！！！！2.xmlHttp.onreadystatechange=handleStateChange;xmlHttp.onreadystatechange=handleChange;后面是回调的方法名！！！！！！！！！！！3.xmlHttp.open("POST","Da.jsp",ture);xmlHttp.open("POST","Da.jsp","ture");。。。。。另外Da.jsp《%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%》《%=new Date() %》测试通过

怎么用AJAX

Ajax工作流程： 1.从页面表单获取须要的数据 2.建立到服务器的连接 3.设置服务器响应之后需要执行的动作 4.向服务器发送请求XMLHttpRequest 对象 属性： onreadystatechange 属性为只读，指定当readyState属性改变时的事件处理句柄 readyState 属性为只读，返回当前的状态，0=未初始化 1=初始化 2=发送数据 3=数据传送中 4=完成 responseText 用字符串返回服务器响应 responseXML 用XML返回服务器响应，可以解析为DOM对象 status 服务器的HTTP状态码,200代表成功，404文件未找到 statusText Http状态码的相应文本 详解：在IE浏览器下 把XMLHTTPRequset实例化为一个Active对象 其他浏览器 把它是想为一个本地的Javascript eg： //创建一个XMLHttpRequest对象实例 function newXMLHttpRequest() {//在非IE浏览器下创建一格XMLHttpRequest if(window.XMLHttpRequest){ xmlHttp= new XMLHttpRequest(); }//在IE浏览器中创建一个XMLHttpRequest对象实例 else if(window.ActiveXObjcet){ try{//在IE较新版本中创建一个XMLHttpRequest xmlHttp =new ActiveXObject("Msxml2.XMLHTTP"); }catch(el){ //创建ActiveXObject失败 try{ //在IE较老版本中创建一个XMLHttpRequest xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2){ //无法创建一个XMLHttpRequest xmlHttp=false; } } } return xmlHttp; } //向服务器发送请求 function addToCart(itemCode){ //得到用户输入 var itemNum=document.getElementById(itemCode).value; //验证用户输入 if(itemNum == ""|| isNaN(itemNum||itemNum《1)){ alert("请输入一个数字"); }else{ //实例一个XMLHttpRequest对象 var xmlHttp =newXMLHttpRequest(); //当状态被改变的时候，你可以做你想做的 xmlHttp.onreadystatechange=getReadyStateHandler(xmlHttp,addUpdate); //设置到服务器的连接 xmlHttp.open("post","cart.do",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求给服务器 xmlHttp.send("action=add&item="+itemCoke+"&count="+itemNum); } } //返回一个函数，当请求完成后，将服务器返回的XML传递给对应函数处理 function getReadyStateHandler(req,responseXmlHandler){ //返回一个匿名函数监听 XMLHtmlRequest对象实例 return function(){ //如果请求的状态是“完成” if(req.readyState==4) //判断请求是否成功 if(req.status==200){ //传递服务器返回的XML给处理函数 responseXmlHandler(req.responseXML); }else{ //发生HTTP问题 alert("HTTP error"+req.status+":"+req.statusText); } } }

ajax的一些问题

***隐藏网址***{***隐藏网址***/ajax/demo_get.asp后的值返回给myDiv,即《div id="myDiv"》《/div》会输出/ajax/demo_get.asp的返回值，}***隐藏网址***