实例解读ajax发送请求与数据响应-CFANZ编程社区

Ajax

前后端数据交互——通过在后台与服务器的少量数据交换，实现页面异步（局部）更新。
异步 -> XMLHttpRequest
后台 <- （交换数据） -> 服务器

适应网址：

var request;
if(window.XMLHttpRequest){
  request=new XMLHttpRequest();   //IE7+、Firefox、Chrome...
}else{
  request=new ActiveXObject("Mierosoft.XMLHttp");   //IE5、6
}

当然，也可以通过try-catch异常处理机制（看下面四步操作中第一步讲解）完成。

HTTP请求

get：| 信息获取
：| URL传递参数
这种方式快，但对发送信息数量有限制。

post：| 修改服务器资源 —— 安全

用XMLHttpRequest发送请求

open(method,url,sync);   //发送请求方法、请求地址（从哪里获得数据）、同步/异步

send(string);   //发送   没有数据时（从后端读取数据）string应写为null——兼容火狐

如：

request.open("GET","get.php",true);   //true代表异步操作
request.send(null);

ajax发送异步请求的四步操作

第一步(得到XMLHttpRequest)
1.得到XMLHttpRequest

大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();
IE6.0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.0以更早版本的IE:var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

2.编写创建XMLHttpRequest对象的函数 —— 兼容浏览器

function createXMLHttpRequest(){
          try{
         return new XMLHttpRequest();
          } catch(e){
         try{
         return new ActiveXObject(“Msxml2.XMLHTTP”);
       }catch(e){
          try{
           return new ActiveXObject(“Microsoft.XMLHTTP”);
         }catch(e){
              alert(“哥们儿,你用的是什么浏览器啊?”);
              throw e;
       }
        }
          } 
}

第二步(打开与服务器的连接)
xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
请求方式:可以是GET与POST
请求的URL:指定服务器端资源,例如:/day23_1/AServlet
请求是否为异步:如果为true表示发送异步请求,否则同步请求

第三步(发送请求)——send()

第四步
在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlHttp对象一共有5个状态
0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法
1:请求已开始,open()方法已调用,但还没调用send()方法
2:请求发送完成状态,send()方法已调用
3:开始读取服务器响应
4:读取服务器响应结束(通常我们只关心最后这个状态!!!)

xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法
       if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断:判断是否为4状态,而且还要判断是否为200
            var text=xmlHttp.responseText;
         } 
};

案例——ajax读取“Hello world”

服务器端代码：

public class AServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Hello world！");
        response.getWriter().print("Hello world");
    }
}

页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 数据交互</title>
</head>
<body>
<button id="btn">点击这里，有惊喜！</button>
<h1 id="h1"></h1>

<script>
    function createXMLHttpRequest() {
        try{
            return new XMLHttpRequest();   // 绝大多数浏览器
        }catch (e) {
            try{
                return ActiveXObject("Msxml2.XMLHTTP");   // IE6.0
            }catch (e) {
                try{
                    return ActiveXObject("Microsoft.XMLHTTP");   // IE5.5及更早版本
                }catch (e) {
                    alert("哥们儿，你这浏览器，，，不行啊！");
                    throw e;
                }
            }
        }
    }
    window.onload=function () {
        var btn=document.getElementById("btn"),
            h1=document.getElementById("h1"),
            text;
        btn.onclick=function () {
            // var xmlHttp;
            // if(window.XMLHttpRequest){
            //     xmlHttp=new XMLHttpRequest();
            // }else{
            //     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            // }
            var xmlHttp=createXMLHttpRequest();   //这一步和上面被注释的几行本质上是一个东西
            xmlHttp.open("GET","/文件操作/AServlet",true);
            xmlHttp.send(null);   //这是什么取决于get /  post
            //xmlHttp.send(处理了的post数据);
            xmlHttp.onreadystatechange=function () {
                if(xmlHttp.readyState===4 && xmlHttp.status===200){
                    text=xmlHttp.responseText;   //得到服务器响应的文本格式的内容（更通用）——var text=XMLHttp.responseXML; //得到服务器响应的xml内容，这就是document对象了
                    h1.innerHTML=text;
                }
            }
        }
    }
</script>
</body>
</html>

最后，再放上jQuery中ajax发送请求数据的案例：

实例解读ajax发送请求与数据响应_数据请求