Ajax重构

Dear 丶 2022-07-13 10:56 24阅读 0赞

#### Ajax重构简介 ####

Ajax的实现主要依赖于XMLHttpRequest对象，但是在调用其进行异步数据传输时，由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它的时候就要重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便，虽然现在很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案，但是如果应用这些框架，通常需要加载很多额外的资源，这势必会浪费很多服务器资源，不过由于JavaScript脚本语言支持OO编码风格，通过它可以将Ajax所必需的功能封装在对象中。

#### Ajax重构步骤 ####

对于Ajax重构会用到JavaScript中的一些相关知识点，例如函数、对象与原型等内容，可以参考之前的一篇博文[http://blog.csdn.net/megustas\_jjc/article/details/53004526][http_blog.csdn.net_megustas_jjc_article_details_53004526]进行相关内容的一个学习。

Ajax的重构大致可以分为如下三个步骤：

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

**（2）在需要应用Ajax的页面中应用以下语句来包括（1）中创建的JS文件**

**注**：src的路径根据实际情况而定

**（3）在应用Ajax的页面中编写错误处理的方法、实例化Ajax对象的方法和回调函数**

其中`getInfo.jsp`为url并且同时通过get的方式传递了参数nocache，其值为`new Date().getTime()`获得，onload为deal\_getInfo方法，通过如上的程序实现了Ajax对象的方法的实例化。

#### 补充内容 ####

**（1）call方法及this对象**

语法：`call([thisObj[,arg1[, arg2[, [,.argN]]]]])`

参数： thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。

说明 ：  
　　call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。  
　　如果没有提供 thisObj 参数，那么 Global 对象被用作thisObj。说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

<input type="text" id="myText"   value="input text">
    <script>
       function Obj(){
         this.value="对象！";}
       var value="global 变量";
       function Fun1(){
         alert(this.value);}
    
       window.Fun1();   //global 变量
       Fun1.call(window);  //global 变量
        //this对象指向的是id为myText的对象，输出：input text
       Fun1.call(document.getElementById('myText')); 
       Fun1.call(new Obj());   //对象！
       window.Fun1(); //global 变量
    </script>

this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。需要注意的是匿名函数的执行环境具有全局性，因此其this对象通常指向window。

例如：

由于getNameFunC()返回一个函数，因此调用object.getNameFunC()()就会立即调用它返回的函数，结果就是返回一个字符串。

**（2）innerHTML**  
定义：innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

innerHTML在JS是**双向功能**：获取对象的内容 或 向对象插入内容；  
如：`<div id="aa">这是内容</div>` ，我们可以通过 `document.getElementById('aa').innerHTML` 来获取id为aa的对象的内嵌内容，此处获得的结果为：这是内容；  
也可以对某对象插入内容，如 `document.getElementById('abc').innerHTML='这是被插入的内容';` 这样就能向id为abc的对象插入内容。

[http_blog.csdn.net_megustas_jjc_article_details_53004526]: http://blog.csdn.net/megustas_jjc/article/details/53004526