Ajax 重构的步骤

柔情只为你懂 2022-05-12 00:30 125阅读 0赞

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

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

具体代码如下：

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 对象的方法和回调函数**

具体代码如下：

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

一、XML（可扩展标记语言） XML与HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。比如有一个学生数据

布满荆棘的人生/ 2024年03月16日 15:05/ 0 赞/ 74 阅读

相关 ajax请求的五个步骤

1. 创建XMLHttpRequest异步对象 var xhr = new XMLHttpRequest() 2. 设置回调函数

我不是女神ヾ/ 2023年08月17日 16:42/ 0 赞/ 125 阅读

相关 ajax的步骤

什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。如何使用ajax? 第一步，创建xmlhttpreque

清疚/ 2023年01月01日 13:54/ 0 赞/ 125 阅读

相关 ajax请求的步骤

1.创建ajax对象 try{ var ajax = new XMLHttpRequest(); //IE8以下不兼容 }catch(e){

Myth丶恋晨/ 2022年12月20日 02:47/ 0 赞/ 130 阅读

相关 Ajax请求步骤（十）

Ajax请求步骤（十） ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETi

我会带着你远行/ 2022年10月09日 00:49/ 0 赞/ 128 阅读

相关 ajax实现步骤之XMLHttpRequest

我们现在开发一直在使用ajax或者是axios与后台进行交互，这两个在浏览器工作的时候都是基于XMLHttpRequest，只不过是封装了便于使用。axios 是一个基于 Pr

我会带着你远行/ 2022年10月01日 10:49/ 0 赞/ 140 阅读

相关 Ajax引擎：ajax请求步骤详细代码

说起AJAX，可能是很多同学在很多地方都看到过，各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项。但是，ajax请求步骤详细代码以及说明却比较少见到

亦凉/ 2022年06月16日 14:46/ 0 赞/ 161 阅读

相关 Ajax 重构的步骤

Ajax重构大致可以分为以下3三个步骤。一创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码具体代码如下：

柔情只为你懂/ 2022年05月12日 00:30/ 0 赞/ 126 阅读

相关实现AJAX的基本步骤

[代码之美][Link 1] 慎独、善思、永恒。 [博客园][Link 2] [首页][Link 1] [新随笔][Link 3] [联系]

古城微笑少年丶/ 2022年02月26日 12:18/ 0 赞/ 164 阅读

相关 Ajax Control Toolkit配置步骤

中秋放假在家里没事做，在看Ajax Control Toolkit,今天上午一来公司打算把它安装到我的电脑上，OK,现在开始.... 一、下载；下载地址：[http://ww

ゝ一纸荒年。/ 2021年11月05日 16:48/ 0 赞/ 453 阅读