JavaWEB学习7-6_AJAX

Ajax

一、介绍

1.1 简介

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

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

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

Ajax不需要插件，但是需要浏览器可以运行JavaScript

1.2 Ajax所包含的技术

1. 使用CSS和XHTML表示
2. 使用DOM模型来交互数据
3. 使用XMLHttpRequest来和服务器进行异步通信
4. 使用JavaScript来绑定和调用

理解：无需刷新的方式是通过JavaScript

二、工作原理

Ajax的工作原理是在用户和服务器之间使用了一个中间层（Ajax引擎）来负责交互，从而使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

三、使用

3.1 XMLHttpRequest 常用属性

1. onreadystatechange 事实上属于事件句柄

   onreadystatechange 属性存有处理服务器响应的函数

   var xmlHttp;
   //...
   xmlHttp.onreadystatechange = function() { //我们需要在这写一些代码
   }
   

2. readyState

   readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

   状态	描述
   0	请求未初始化（在调用 open() 之前）
   1	请求已提出（调用 send() 之前）
   2	请求已发送（这里通常可以从响应得到内容头部）
   3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
   4	请求已完成（可以访问服务器响应并使用它）

   响应验证

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

3. responseText

   可以通过 responseText 属性来取回由服务器返回的数据

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

4. responseXML

   对请求的响应，解析为 XML 并作为 Document 对象返回

5. status

   由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常

6. statusText

   这个属性用名称而不是数字指定了请求的 HTTP 的状态代码

3.2 XMLHttpRequest 方法

1. open() 方法

   open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规 定应当对请求进行异步地处理

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

2. send() 方法

   send() 方法将请求送往服务器

   xmlHttp.send(null);
   

3. abort()

   取消当前响应，关闭连接并且结束任何未决的网络活动

4. getAllResponseHeaders()

   把 HTTP 响应头部作为未解析的字符串返回

5. getResponseHeader()

   返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的

6. setRequestHeader()

   向一个打开但未发送的请求设置或添加一个 HTTP 请求

3.3 Ajax编程步骤

1. 创建XMLHttpRequest对象
2. 设置请求方式
3. 调用回调函数
4. 发送请求

3.3.1 创建XMLHttpRequest对象

var xmlHttp;
if (window.XMLHttpRequest) {
    //非IE
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

3.3.2 设置请求方式

• 参数1：设置请求类型（GET 或 POST）
• 参数2：文件在服务器上的位置
• 参数3：是否异 步处理请求，是为true，否为false

var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

3.3.3 调用回调函数

果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数， XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在 这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容

//第三步：注册回调函数
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
        	alert("AJAX服务器返回错误！");
        }
    }
}

3.3.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);

四、jQuery操作Ajax

4.1 ajax()

$.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)//请求失败时
})

4.2 get() 方法通过远程 HTTP GET 请求载入信息

data是参数信息，通过 parameter=value 的形式

$.get(url,data,function(result) {
	//省略将服务器返回的数据显示到页面的代码
});

4.3 post() 方法通过远程 HTTP GET 请求载入信息

data是参数信息，通过 parameter=value 的形式

$.post(url,data,function(result) {
	//省略将服务器返回的数据显示到页面的代码
});

五、Ajax和Json

栗子

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("[name='uid']").blur(function(){
            var uid=$(this).val();
                $.ajax({
                url:"getuser",
                data:"userid="+uid,
                type:"post",
                dataType:"JSON",//设置服务器端响应回来的格式
                success:function(rs){
                    //alert(rs.username);
                    $("[name='uname']").val(rs.username);
                    $("[name='address']").val(rs.address);
                    if(rs.sex=='男'){
                    	$("#boy")[0].checked=true;
                    }else{
                    	$("#girl")[0].checked=true;
                    }
                }
            });
        });
    })
</script>
</head>
<body>
    userid:<input type="text" name="uid"><br>
    username <input type="text" id="uname" name="uname"><br>
    address <input type="text" id="address" name="address"><br>
    sex:<input type="radio" name="sex" id="boy">男
    <input type="radio" name="sex" id="girl">女
</body>