【Ajax】XMLHttpRequest介绍以及在前端如何实现Ajax

相关文章：

1. 【JSON介绍】什么是JSON？
2. 【Ajax】Ajax介绍
3. 【Ajax】XMLHttpRequest介绍以及在前端如何实现Ajax
4. 【Struts2】Sturts2如何实现JSON的数据输出，完成Ajax响应

使用JavaScript完成Ajax请求：

关于 XMLHttpRequest对象的介绍如下：

XMLHttpRequest 对象用于在后台与服务器交换数据

XMLHttpRequest 对象是开发者的梦想，因为您能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

xmlhttp=new XMLHttpRequest();

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

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

XMLHttpRequest 的几个基本方法和属性

• open()：建立到服务器的新请求
• send()：向服务器发送请求
• abort()：退出当前请求
• readyState：提供当前 HTML 的就绪状态
• responseText：服务器返回的请求响应文本

<script type="text/javascript">
    //获取一个XMLHttpRequest对象
    var request = new XMLHttpRequest();
    //使用open方法填写参数，最后一个true表示使用使用异步提交，可以省略，默认值就是true
    request.open("POST","ajax.html?className="+className,true);
    //发送ajax请求
    request.send();
    //监听请求的状态，主要有0 1 2 3 4 这几种，但是一边只会监听2 3 4 ，其中4表示成功
    request.onreadystatechange = function(){
      //判断只有当请求成功时才进行下一步
      if(request.readyState===4){
        //判断只有当网页的返回码为200 OK时才进行下一步
        if(request.status===200){
          //使用JSON.parse方法序列化化返回的json数据
          var data = JSON.parse(request.responseText);
          }
      }
    }
}
</script>

使用Jquery完成Ajax请求

//jquery标准语法
$(document).ready(function(){
    //监听id为nameInput的input控件的失去焦点的动作，当这个控件所选中的控件改变时会出发这个function
    $("#nameInput").blur(function(){
        console.log("失去焦点...");
        console.log("开始提交ajxa请求...");
        //调用jquery中的ajax
        $.ajax({
            //设定提交方式，主要是"GET"和"POST"
            type:"POST",
            //设定提交的url，这里只能选择本地的，如果需要调用其他域的资源，请google解决跨域问题
            url:"registeredByAjax?user.name="+$("#nameInput").val(),
            //设定后台返回的格式，一般都是直接使用json，这一句不能少，否则当后台返回数据时，不会调用success方法
            dataType:"json",
            //当后台成功返回数据时调用该方法，data参数表示被jquery中的ajax序列化后的json数据
            success:function(data){
                console.log("接收到后台传回来的json数据："+data);
                console.log("开始处理json数据...");
                //struts2传回来的json数据需要使用eval()方法序列化，但是使用
                    //response.setContentType("application/json");
                   //response.getWriter().print(jsonObject.toString());
                    //发回来的json不需要加这一步，不要问我为什么，我也不知道。。。
                data = eval("(" + data + ")");
                //处理后台传回来的json数据
                    //当code不等于200的时候
                    //这里封装的json格式的data数据为{"code":200,msg:"成功","data":[{},{}]}
                    if(data.code!=200){
                        //将msg内容显示到页面中
                        $("#message").html(data.msg);
                    }
                    //当code等于200时清楚之前的提示
                    if(data.code==200){
                        $("#message").html("");
                    }
            },
            //当返回数据不成功时的操作
            error:function(jqXHR,XMLResponse){
                console.log("出现问题...");
                console.log(arguments[1]);
                console.log(XMLResponse.responseText);
                console.log("发生错误:"+jqXHR.status);
            }
        });
    });
});