AJAX小结

【前言】

最近通过看ajax视频对ajax有了一点点的了解，因为视频中讲的ajax基本上是用XMLHttpRequest对象，而自己以前接触的是$.ajax(){}函数，所以自己又额外的查找了一些资料。既然视频看完了甭管和自己以前接触的是否有出入，多多少少还是会有收获的，下面就对视频进行一个小结！详情请见下文！

【正文】

1、内容概图

2、解图：

AJAX的视频其实看了两种，一个针对Java的AJAX视频，还有一个是ASP.NET的AJAX视频，收获更多的是第一个，第一个视频虽然是Java的，但是感觉讲的很清晰，每个知识点会有相应的小例子，还会用多种方法介绍这个知识点。下面对第一个视频进行大概的解说！

视频其实就讲了5个大的部分，也可以再缩小范围讲了3个部分（把DOM划分到JavaScript中，把对象XMLHttpRequest划分到AJAX简介中），不过我还是喜欢分成5个部分。

（1）、AJAX简介：

这块主要讲了一下什么是AJAX，然后对比了一下传统的web开发和使用AJAX方式开发的区别，这部分知识我已经在上篇博客AJAX入门基础中做过介绍了，这里就不再介绍了。

（2）、对象XMLHttpRequest：

这部分主要讲了一下XMLHttpRequest对象的历史、如何使用XMLHttpRequest、XMLHttpRequest的属性和方法。

①XMLHttpRequest对象的历史：

最早在IE5中以ActiveX控件的形式出现，后来Opera等浏览器都支持了XMLHttpRequest。

②使用XMLHttpRequest的五个步骤：

上篇博客AJAX入门基础以介绍过

③XMLHttpRequest的属性和方法

（3）、DOM：

这里主要介绍了什么是DOM、DOM树中常用节点、DOM如何看待HMTL文档。

此视频中之所以介绍DOM，目前个人想到的理由是——JavaScript中的DOM实现可以使得在AJAX中通过JavaScript代码对HTMl和XML数据进行DOM方式的操作，从而做到页面的动态修改更新和数据的提取处理。

①DOM：

是Document Objec Model的简称，被称为文档对象模型，是语言和平台中立的接口，允许程序和脚本动态访问和更新文档的内容、结构、风格

②DOM树：

◆DOM将每一个HTML或XML的文档都看待成内存中的一个对象树，浏览器中的一个页面对应一个HTML文档，因此有一颗与之对应的HTML的DOM树。

◆在DOM树中，文档内容对应了很多不同类型的节点，他们都是一个NODE对象。

◆下面简单介绍一下常用的节点：

（4）、JavaScript：

这块主要讲了JavaScript中的数组、简单对象、JSON数据格式、XMLHttpRequest对象的封装。

①数组——

◆创建：

<script type="text/javascript" >
         function arrayTest() {
             //1、简单的只创建数组
             //使用new Array()
             var array1 = new Array();
             //使用[]操作符
             var array2 = [];

             //2、创建的同时定义数组中的元素
             //使用new array（）方法
             var array3 = new Array(1,2,3);
             //使用[]操作符
             var array4 = [1,3];

             //3、创建多维数组
             //使用new Array（）
             var array5 = new Array(1,new Array(2,3),4);
             //使用[]操作符
             var array6 = [1,[2,3],4];

             alert("");
         }
    </script>

◆下标操作:

//数组的下标操作

             //1、获取数组中的某个元素的值
             alert(array3[1]);
             //2、设置数组中某个下标对应的元素值
             array4[2] = 111;
             //3、访问多维数组中的元素
             alert(array5[1][0]);
             //4、javascript中的数组是可以动态改变大小的，因此可以直接给一个不存在的下标设置元素值
             array6[99] = 100;

◆方法：

◇concat（）方法：

//concat，这个方法可以用来做数组的连接或者合并，原数组内容不会变更，将返回一个新的数组
var array41 = array4.concat(101,102,103);
var array42 = array4.concat([104,105]);
var array43 = array4.concat(array4);

◇join（）方法：

//join,这个方法可以将数组当中的元素按照指定的分隔符连接成字符串输出，原数组的内容不会变更
var strarray431 = array43.join("");//1211112111
var strarray432 = array43.join("+");//1+2+111+1+2+111

slice（）方法：

//slice,这个方法可以返回当前数组的子数组，原数组的内容不会改变
var slicearray1 = array43.slice(0,3); //从0下标开始，到3下标之前的元素返回成新的数组[1,111]

reverse（）方法：

//reverse，这个方法可以翻转数组中的元素，修改原数组的内容
array43.reverse();

sort（）方法：

//sort,这个方法可以对数组中的元素进行排序，修改原数组的内容
array43.sort();
//按照字母序对数组中的元素进行了升序的排列，就是按照数值大小，进行了一个升序的排列，
array43.sort(function (a,b) {
    //如果返回的是负值，则a会出现在b的前面
    return a - b;
});
//按照数值大小，进行了一个降序的排列
array43.sort(function (a,b) {
    return b - a;
});

push（）方法：

//push，在数组尾端追加元素，将会修改原数组的内容
//push一个元素
array43.push(200);
//push多个元素
array43.push(201,202);
//push数组
array43.push([203,204]);
array43.push(array41);

◇ pop（）方法：

//pop，在数组尾端弹出元素，将会修改原数组的内容
var arraypop = array43.pop();
var arraypop = array43.pop();

②JSON数据格式——

◆JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，即纯文本格式，是JavaScript原生格式。

◆ 简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪，但是 JavaScript 很容易解释它，而且 JSON 可以表示比"名称/值对"更复杂的结构，如数组等

◇JSON表示“名称/值对”

{"name":"lisi","sex":"女","email":"lisi@163.com"}

◇JSON表示“数组”

{"teachers":[
    {"name":"lisi","email":"lisi@163.com"},{"name":"wangwu","sex":"男","email":"wangwu@163.com"},{"name":"zhaoliu","email":"zhaoliu@163.com"}
]}