1.3 Ajax的⼯作原理

• 浏览器的普通交互⽅式

•  浏览器的Ajax交互⽅式

• 动态更新购物⻋的物品总数，⽆需⽤户单击Update并等待服务器重新发送整个⻚⾯。
• 提升站点的性能，这是通过减少从服务器下载的数据量⽽实现的。例如，在Amazon的购物⻋⻚⾯，当更新篮⼦中的⼀项物品的数量时，会重新载⼊整个⻚⾯，这必须下载32K的数据。如果使⽤Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之⼀。
• 消除了每次⽤户输⼊时的⻚⾯刷新。例如，在Ajax中，如果⽤户在分⻚列表上单击Next，则服务器数据只刷新列表⽽不是整个⻚⾯。
• 直接编辑表格数据，⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于Ajax，当⽤户单击Edit时，可以将静态表格刷新为内容可编辑的表格。⽤户单击Done之后，就可以发出⼀个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

1.4 XMLHttpRequest常⽤属性

1. onreadystatechange 属性

javascript">xmlHttp.onreadystatechange = function() { //我们需要在这写⼀些代码}

2. readyState 属性

javascript">xmlHttp.onreadystatechange = function() { 
    if (xmlHttp.readyState == 4) { 
         //从服务器的response获得数据 
    }
}

javascript">xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4) { 
         document.myForm.time.value = xmlHttp.responseText; 
     }
}

其他属性如下：

1.5 XMLHttpRequest⽅法

1. open() ⽅法

javascript">xmlHttp.open("GET","test.php",true);

2. send() ⽅法

javascript">xmlHttp.send(null);

2.Ajax编程步骤

1. 创建 XMLHttpRequest 对象。

2. 设置请求⽅式。

3. 调⽤回调函数。

4. 发送请求

 

2.1 创建XMLHttpRequest对象

 var xmlHttp=new XMLHttpRequest();

如果是IE5或者IE6浏览器，则使⽤ActiveX对象，创建⽅法是：

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

// 第⼀步：创建 XMLHttpRequest 对象

var xmlHttp ;

if ( window . XMLHttpRequest ) {

        //⾮ IE

        xmlHttp = new XMLHttpRequest ();

} else if ( window . ActiveXObject ) {

        //IE

        xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP" )

}

2.2 设置请求方式

 如下：

// 第⼆步：设置和服务器端交互的相应参数，向路径

http://localhost:8080/JsLearning3/getAjax 准备发送数据

var url = "http://localhost:8080/JsLearning3/getAjax" ;

xmlHttp . open ( "POST" , url , true );

 open⽅法如下：

• ⽆法使⽤缓存⽂件（更新服务器上的⽂件或数据库）
• 向服务器发送⼤量数据（POST 没有数据量限制）
• 发送包含未知字符的⽤户输⼊时，POST ⽐ GET 更稳定也更可靠

• 在等待服务器响应时执⾏其他脚本
• 当响应就绪后对响应进⾏处理

2.3 调⽤回调函数

• 如果在上⼀步中open⽅法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写⼀个回调函数。
• XMLHttpRequest对象有⼀个onreadystatechange属性，这个属性返回的是⼀个匿名的⽅法，所以回调函数就在这⾥写xmlHttp.onreadystatechange=function{}，function{}内部就是回调函数的内容。
• 所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。
• 在这个例⼦⾥，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中⾸先要判断后台返回的信息是否正确，如果正确才可以继续执⾏。代码如下：

// 第三步：注册回调函数

xmlHttp . onreadystatechange = function () {

        if ( xmlHttp . readyState == 4 ) {

                if ( xmlHttp . status == 200 ) {

                        var obj = document . getElementById ( id );

                        obj . innerHTML = xmlHttp . responseText ;

                } else {

                        alert ( "AJAX 服务器返回错误！ " );

                }

         }

}

0: 请求未初始化。

1: 服务器连接已建⽴。

2: 请求已接收。

3: 请求处理中。

4: 请求已完成，且响应已就绪。

• 200代表正确。
• 404代表未找到⻚⾯

所以这⾥我们判断只有当xmlHttp.status等于200的时候才可以继续执⾏。

var obj = document . getElementById ( id ); obj . innerHTML = xmlHttp . responseText ;

• responseText是⽤来获得字符串形式的响应数据
• responseXML是⽤来获得 XML 形式的响应数据

⾄于选择哪⼀个是取决于后台给返回的数据的，这个例⼦⾥我们只是显示⼀条字符串数据所以选择的是responseText。responseXML将会在以后的例⼦中介绍。

if ( ajax . readyState == 4 && ajax . status == 200 ) { 。。。。 );}

• 0 - (未初始化)还没有调⽤send()⽅法
• 1 - (载⼊)已调⽤send()⽅法，正在发送请求
• 2 - (载⼊完成)send()⽅法执⾏完成，
• 3 - (交互)正在解析响应内容
• 4 - (完成)响应内容解析完成，可以在客户端调⽤了

2.4 发送请求

// 第四步：设置发送请求的内容和发送报送。然后发送请求

var uname = document . getElementsByName ( "userName" )[ 0 ]. value ;

var upass = document . getElementsByName ( "userPass" )[ 0 ]. value ;

var params = "userName=" + uname + "&userPass=" + upass + "&time=" +

Math . random ();

// 增加 time 随机参数，防⽌读取缓存

xmlHttp . setRequestHeader ( "Content-type" , "application/x-www-form-urlencoded;charset=UTF-8" );

// 向请求添加 HTTP 头， POST 如果有数据⼀定加加！！！！

xmlHttp . send ( params );

javascript">$.ajax({
 url:请求地址
 type:"get | post | put | delete " 默认是get,
 data:请求参数 {"id":"123","pwd":"123456"},
 dataType:请求数据类型"html | text | json | xml | script | jsonp ",
 success:function(data,dataTextStatus,jqxhr){ },//请求成功时 
 error:function(jqxhr,textStatus,error)//请求失败时
})

<script type="text/javascript">
// json的定义 
var jsons = {
     "key1":"abc", // 字符串类型
     "key2":1234, // Number
     "key3":[1234,"21341","53"], // 数组
     "key4":{ // json类型
         "key4_1" : 12,
        "key4_2" : "kkk"
     },
     "key5":[
        { // json数组
             "key5_1_1" : 12,
             "key5_1_2" : "abc"
         },
         {
             "key5_2_1" : 41,
             "key5_2_2" : "bbj"
          }
     ]
 };

 // 访问json的属性
 alert(jsons.key1); // "abc"
 // 访问json的数组属性
 alert(jsons.key3[1]); // "21341"
 // 访问json的json属性
 alert(jsons.key4.key4_1);//12
 // 访问json的json数组
 alert(jsons.key5[0].key5_1_2);//"abc"
</script>

javascript">Users user2=new Users();
user2.setUsername("李四");
user2.setPassword("abc");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的

javascript">String str="{'username':'李四','password':'admin','age':19}";
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);

javascript">List list=new ArrayList();
list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set也是这么转

javascript">String str2="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'张三'}]";
 JSONArray json2=JSONArray.fromObject(str2);
Object[] obj=(Object[])JSONArray.toArray(json2,Users.class);

javascript"> String str3="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'展示⼲'}]";
JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
List<Users> list=(List<Users>) JSONArray.toCollection(json3,Users.class);