AJAX知识点

AJAX知识点

AJAX的优点

1. 局部响应（用户体验好）
2. 异步请求（效率高）

发送AJAX请求的流程

AJAX分为四步，第一步创建XMLHttpRequest对象，第二步和服务器建立连接，第三布调用回调函数，最后一步发送请求数据。
值得一提的是，和服务器建立连接时分为两种方式，建立get连接和post连接，由于两种方式传输数据方式不同，故连接方式也不同。

					//[A]创建XMLHttpRequest对象
                    if (window.ActiveXObject){//IE
                        xhr = new ActiveXObject("Micsoft.XMLHTTP");
                    }else {//其他浏览器
                        xhr = new XMLHttpRequest();
                    }
                    //[B]和服务器建立连接
                    //xrh.open(method,url,ayn,username,password);
                    //get请求
                    // xhr.open("get","SaveServlet?uname="+val,true);
                    //post请求
                    xhr.open("post","SaveServlet",true);
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    //[C]执行回调函数-->接收Servlet的响应信息
                    xhr.onreadystatechange = process;
                    //[D]发送请求数据
                    // xhr.send(null);
                    xhr.send("uname="+val);
		//被调用的回调函数
		function process() {
            // alert("就绪状态："+xhr.readyState);
            if (xhr.readyState == 4){
                if (xhr.status == 200){
                    //接收响应的数据
                    var text = xhr.responseText;
                    document.getElementById("uname_span").innerText=text;
                }else if (xhr.status == 404){
                    alert("路径找不到");
                }else if (xhr.status == 500){
                    alert("服务器异常")
                }else {
                    alert("ajax响应失败")
                }
            }

AJAX的五种就绪状态

状态码：

• 0：请求没有发出（在调用open函数之前）
• 1：请求已经建立，但还没有发出
• 2：请求已经发出正在处理之中
• 3：请求已经处理，响应数据有部分数据可用，但是服务器还没有完成响应
• 4：响应已经完成，可以访问服务器响应并使用它

我们一般在就绪状态码为4，HTTP状态码为200时获取响应信息并处理。

Ajax响应处理数据的三种格式

      Ajax响应处理数据的三种格式
      A.普通文本
           resp.getWriter().print("Ajax响应成功");
      B.JSON
           1.更改toString方法
           2.手动拼接json字符串
           3.使用GOSN包得到
               String json = new Gson().toJson(user);
           前台如何处理json字符串
               eval();
               var e = JSON.parse(text);
      C.XML格式
           var doc = xhr.responseXML;
  
  //        resp.setContentType("text/html;charset=utf-8");
        //若使用响应xml的方式的话，字符集不改变，但是类型改变
        resp.setContentType("text/xml;charset=utf-8");
        /***********方式一：普通文本**************/
//        resp.getWriter().print("Ajax响应成功");
        /***********方式二：JSON**************/
        //模拟数据库查询出一个对象
        User user = new User(1,"zs","123");
        User user2 = new User(1,"zs","123");

        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
//        String json = "{uid:'"+user.getUid()+"',uname:'"+user.getUname()+"',pwd:'"+user.getPwd()+"'}";
//        resp.getWriter().print(user.toString());
//        resp.getWriter().print(json);
//        String json = new Gson().toJson(list);
//        resp.getWriter().print(json);

        /***********方式三：XML**************/
        resp.getWriter().print("<users><user><uname>zs</uname><pwd>123</pwd></user><user><uname>ls</uname><pwd>123</pwd></user><user></user><uname>ww</uname><pwd>123</pwd></users>");

AJAX接收：

		var xhr;
        function demo1() {
            xhr = new XMLHttpRequest();
            xhr.open("get","AjaxServlet3",true);
            xhr.onreadystatechange = process;
            xhr.send(null);
        }
        function process() {
            if (xhr.readyState == 4 && xhr.status == 200){
                // var text = xhr.responseText;
                // console.log(text);
                //通过eval函数 使用js代码将字符串化为JSON取出
                // eval("var e ="+text);
                //注意:json格式中的key必须用引号引出
                // var e = JSON.parse(text);
                //取List中的值
                // console.log(e[1].uid);
                // console.log(e.uname+"--"+e.pwd+"--"+e.uid);

                //接收xml响应
                var doc = xhr.responseXML;
                var u = doc.getElementsByTagName("uname");
                console.log(u[0].innerHTML);
            }
        }
        function demo2() {
            var j =  {uname:"zs",pwd:"123",id:456};
            console.log(j.id);
        }