Ajax基础

一、Ajax简介

异步：不用等待服务器返回响应，速度快。
异步的JavaScript和XML。它不是一项新技术，只是几种技术的组合。
是(X)HTML、CSS、JavaScript、DOM的组合。

优点：

1)无须刷新页面就可从服务器上加载数据。
2)减少了不必要的数据往返

二、Ajax原理：

客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前声明的回调函数，在回调函数中可以使用JavaScript操作DOM来更新页面。异步请求不会阻塞客户端的操作，达到页面无刷新的效果。

三、XMLHttpRequest对象：

属性：
onreadstatechange 状态改变事件。指定一个回调函数的名
readyState 对象的状态：0、1、2、3、4
responseText 服务器返回的响应文本数据
responseXML 服务器返回的响应XML文档对象
status 服务器返回的HTTP状态码：200、404、500

方法：
open(“method”,“url”,asyncFlag); 创建一个请求
setRequestHeader(“名”,“值”); 设置请求的头部信息。在POST请求情况下， 要设置请求消息体的编码方式。
send(content); 发送请求。content指的是要添加到请求消息体中的内容
getAllResponseHeaders(); 获取服务器HTTP响应消息的所有头部信息
getResponseHeader(“名”); 获取指定名称对应的头部信息值

四、异步请求的封装：

var xhr = false;
  //step1: 创建一个兼容各种浏览器版本的XMLHttpRequest对象
  if (window.XMLHttpRequest) {   //Mozilla浏览器
    xhr = new XMLHttpRequest();
  } else {
    if (window.ActiveXObject) { //IE浏览器
      try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");  //ie6以上
      } catch (e) {
        try {
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
  }

  //step2: 设置回调函数 
  xhr.onreadystatechange = function(){
     if(xhr.readyState == 4){
         if(xhr.status == 200){
               callback();
         }
      }
  };

  //step3: 创建一个异步请求
  xhr.open("method","url",true);
  if("post" == method){
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置请求参数的编码方式
  }

  //step4: 发送异步请求
  xhr.send(content); //如果是GET方式,content为null;若为POST,content为“名=值”对。

五、回调函数模板：

function myCallback(){
             //处理服务器返回的响应数据
             var str = xhr.responseText;
             //var myDoc = xhr.responseXML;
  }

六、Ajax和服务器之间的数据传递：

客户端请求服务器
★1. 使用”名=值”对： paramName1=value1&paramName2=value2&…
2. 使用XML： ….
3. 使用JSON：是ECMA262的规范的子集(JavaScript1.2)。轻量级的数据交换格式。

服务器响应客户端
★1. 字符串：
2. 使用XML: 在客户端需要使用DOM来解析它
3. 使用JSON：
在服务器端先把对象数据转换成JSON格式的字符串发送给客户端。(使用json官方提供的org.json)
在客户端把接收到的JSON格式字符串转换成JSON对象。(使用json官方提供的json2.js)

七、JSON的语法：

数据类型格式： String “字符序列” 不能用单引号
Number 整型、浮点型
Boolean true、false
Null值 null
数组 [“元素1”,true,null]
对象 {“属性名”:值,”属性名”:值}
使用json包需要导入一个org.json—json2.js
例：

var accList = [{"id": 1,"loginname": "zs","order":{"id": 1,"price": 33.3}},{"id": 2,"loginname": "ls","order":{"id": 2,"price": 63.3}},{"id": 3,"loginname": "ww","order":{"id": 3,"price": 73.3}}];
   accList[1].loginame;
   accList[2].order.price;

Java中使用JSON

将list通过Json写成str输出到页面中

JSONArray j=new JSONArray(list,true);
String str=j.toString();
response.getWriter().write(str);

js中使用JSON

转换成字符串：JSON.stringify();
转回JSON.parse()
访问：json[0].[“login.name”]

json数组：var stuArr=[{“login:”}] EL表达式中访问.号用［］解决