AJAX

1】ajax：

Asynchronous JavaScript and XML（异步js和xml）

2】异步刷新：

如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的地方，而页面中其他地方保持不变。

3】实现方式：

①JavaScript

（严格依赖于XMLHttpRequest对象）

XMLHttpRequest对象的常见方法：

• open(提交方式get/post,服务器地址,true)：与服务端建立连接

  • 其中第三个参数一般是true使用异步刷新，如果为false使用全局刷新

• send()：分两种提交方式get/post

  • get：send(null) 需要发送的数据被写在了open方法的第二个参数url中用?拼接需要查询的数据
  • post：send(参数值) key=value的形式

• setRequestHeader(header,value)：也是分两种提交方式get/post

  • get：不需要设置此方法

  • post：需要分两种方式设置该方法

    • a.如果请求元素中包含了文件上传：
      • setRequestHeader("Content-Type","multipart/form-data")
    • b.如果不包含文件上传：
      • setRequestHeader("Content-Type","application/x-www-form-urlencoded")

XMLHttpRequest对象的属性：

• readyState：请求状态

  #readyState表示XMLHttpRequest对象发送的HTTP请求状态，共有五种状态：（只有状态4是请求完毕，记住）
  0：表示XMLHttpRequest对象没有初始化
  1：表示XMLHttpRequest对象开始发送请求，已经执行了open()方法并完成了相关资源的准备
  2：表示XMLHttpRequest对象已经将请求发送完毕，已经执行了send()方法来发送请求，但是还没有收到响应
  3：表示XMLHttpRequest对象开始读取响应信息，已经收到了HTTP响应的头部信息，但是还没有将响应体接受完毕
  4：表示XMLHttpRequest对象将响应信息全部读取完毕
  

• status：响应状态

#status表示HTTP响应中的状态码，各状态码含义如下：可发现只有当状态码为200时才表示响应成功
200：服务器正常响应
400：无法找到请求的资源
403：没有访问权限
404：访问的资源不存在
500：服务器内部错误，很可能是服务器代码有错

• onreadystatechange：回调函数
• responseText：响应格式为String
• responseXML：响应格式为XML

具体实现代码：

<input id="mobile"/>
<button onclick="register()">注册<button>
<script type="text/javascript">
    function register(){
        var mobile = document.getElementById("mobile").value;
        //通过ajax异步方式请求服务端
        xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open(提交方式get/post,服务器地址,true);
        //设置post方式的 头信息
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttpRequest.send("mobile="+mobile);//key=value的形式
        //设置xmlHttpRequest对象的回调函数
        xmlHttpRequest.onreadystatechange=callBack;//方法的引用不需要写括号
    }
    //定义回调函数（接受服务端的返回值）
    function callBack(){
        if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status ==200){
            //接受服务端返回的数据
            var data = xmlHttpRequest.responseText;//服务端返回值为string格式
            if(data=="true"){
               alert("此号码已存在,请更换")
               }else{
                alert("注册成功")
            }
        }
    }
</script>

②jQuery（推荐）

$.ajax({})方式

<input id="mobile"/>
<button onclick="register()">注册<button>
<script type="text/javascript">
    function register(){
       var $mobile=$("#mobile").val();
        $.ajax({
            url:服务器地址,
            请求方式:get/post,
            data:请求数据,
            success:function(result,testStatus){
                if(result=="true"){
                    alert("存在")
                }else{
                    alert("不存在")
                }
            },
            error:function(xhr,errorMessage,error对象){
                //服务端发生异常才会进入error
            }
        });
    }
    </script>

$.get()

//严格要求参数的顺序

$.get(服务器地址,
      请求数据,
      function(result){
    	//success
			},
      预期返回值类型-json/xml/text)

$.post()

$.post(服务器地址,
      请求数据,
      function(result){
    	//success
			},
      预期返回值类型-json/xml/text)

$("xxx").load()

$("#id").load(服务器地址,请求数据)
//会将服务端中的返回数据在$(#id)选择器中展示出来

$.getJSON()

$.getJSON(服务器地址,
      JSON格式的请求数据,//{key1:value1,key2:value2..}
      function(result){
    	//success
			}
      //预期返回值类型就是json，不需要再去加这个参数)