9、ajax和json

一、什么是AJAX：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

同步传输的问题：

•传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后一个响应。在这段时间内，用户会傻乎乎的盯着一个空白页面看。这是因为以往的传输方式为同步处理方式。

二、XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1、创建XMLHttpRequest

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2、向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,async)

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

send(string)

• string：仅用于 POST 请求

//GET请求
xmlhttp.open("get","/pro12306/login",true);
xmlhttp.send();

//Post请求
xmlhttp.open("POST","/pro12306/login",true);
//请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=cykj001&passWord=123456");

3、onreadystatechange 事件

每当 readyState 属性改变时，就会调用该函数。

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status

200: “OK” 404: 未找到页面

//当 readyState 等于 4 且状态为 200 时，表示响应已就绪
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

//后台
PrintWriter pw = response.getWriter();
        pw.print("666");
        
        
        JSONArray arr = JSONArray.fromObject(list);
        PrintWriter pw = response.getWriter();
        pw.print(arr);
        pw.flush();
        pw.close();

三、jquery的ajax

语法：

$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。

url	规定发送请求的 URL。默认是当前页面。
async	布尔值，表示请求是否异步处理。默认是 true。
data	规定要发送到服务器的数据。
success(result,status,xhr)	当请求成功时运行的函数。

$.ajax({
            url:"login",
            data:{"userName":"zs","passWord":"123456"},
            success:function(data){
                console.log(data);
            }
        });
        
        
        //后台
         resp.getWriter().print("666");

$.ajax({
            url:"userList",
            data:{"userName":"zs","passWord":"123456"},
            success:function(data){
                var list = JSON.parse(data);
                for(var i=0;i<list.length;i++){
                    console.log(list[i].uname);
                }
            }
        });
        
        //后台
        List<Tbluserinfo> list = userServiceImpl.findUserList();
//        request.setAttribute("list",list);
//        request.getRequestDispatcher("/userList.jsp").forward(request,response);
        JSONArray jsonArray2 = JSONArray.fromObject( list );
        PrintWriter printWriter = response.getWriter();
        printWriter.print(jsonArray2);
        printWriter.flush();
        printWriter.close();
        
        //json依赖
         <!--json依赖-->
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
      <classifier>jdk15</classifier>
    </dependency>
    
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.76</version>
    </dependency>