Ajax 重构的步骤

柔情只为你懂 2022-05-12 00:30 138阅读 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 条评论，138人围观）

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

相关阅读

相关代码重构挑战：Java重构复杂业务逻辑的步骤

Java重构复杂业务逻辑是一个系统性的工作，通常包括以下几个步骤： 1. **理解现有逻辑**：首先要对当前代码进行详细阅读，理解每个方法的功能以及它们之间的关系。

╰半橙微兮°/ 2024年12月08日 06:03/ 0 赞/ 22 阅读

相关 ajax请求的五个步骤

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

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

相关【Ajax教科书】原生Ajax开发步骤总结

文章目录 @\[toc\] 一、了解Ajax 1.1 什么是Ajax？二、Ajax的工作原理三、Ajax get/post实例 3.1 Ajax开发步骤 3

深碍√TFBOYSˉ_/ 2023年02月10日 03:49/ 0 赞/ 8 阅读

相关 ajax的步骤

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

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

相关 ajax请求的步骤

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

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

相关 Ajax请求步骤（十）

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

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

相关 Ajax重构

Ajax重构简介 Ajax的实现主要依赖于XMLHttpRequest对象，但是在调用其进行异步数据传输时，由于XMLHttpRequest对象的实例在处理事件完成后就会

Dear 丶/ 2022年07月13日 10:56/ 0 赞/ 24 阅读

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

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

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

相关 Ajax 重构的步骤

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

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

相关实现AJAX的基本步骤

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

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