Ajax学习小记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mackyhuang/article/details/82431830

AJAX

@MackyHuang

What is AJAX（asynchronous javascript and xml）

是一种用来改善用户体验的技术，其本质是利用浏览器内置的特殊对象（XMLHttpRequest，也就是Ajax对象），向服务器发送异步请求，服务器返回部分数据（通常不会是整个页面），浏览器利用这些数据对页面做部分更新，整个访问服务器的过程没有存在月面的刷新，不会打断用户的操作

异步请求：发送请求的同时，流浪其不会销毁当前页面，用户仍然可以对当前页面做其他操作

如何获得ajax对象

兼容性问题：

ie使用的是ActiveXObject
其他浏览器是XMLHttpRequest
这里就有兼容性问题，对于不同的浏览器有不同的解决办法，底层的解决办法是：

function  getxhr() {
            var xhr = null;
            if(window.XMLHttpRequest)
            {
                xhr = new XMLHttpRequest();
            }
            else
            {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            return xhr;
        }

ajax对象的属性

• onReadyStateChange
  用来绑定一个事件处理函数，用来处理readyStateChange事件
  当ajax对象中的readyState属性值发生从0到1的改变的时候，就会产生readystatechange事件
  
• readyState
  有五个值（0，1，2，3，4）
  表示ajax对象和服务器通信的状态
  如果值为4的时候，表示ajax对象已经获取了服务器返回的所有数据
  这个事件事件处理函数就可以从对象中读取数据
• responseText
  返回的对象中的文本数据
• responseXML
  返回的对象中的xml数据
• status
  获得状态码
  500服务器出错
  200服务器正常
  404请求路径无法找到
  302重定向
  

编程步骤

获取ajax对象

例如:
var xhr = getXhr();

发生请求

• 发送get请求
  

---

1. xhr.open("get","check_uname.do?uname=tom&age=18", true);
   
   第一个参数是请求方式
   第二个参数是请求地址
   第三个参数是是否发送异步请求，一般都是true
   如果是false，发送请求的时候，页面不会消失，可是浏览器会锁定当前页面，用户不能够对当前页面做其他操作
   
   

2. xhr.onreadystatechange=function1;
   
   绑定一个事件，在状态转换的时候会调用这个函数

3. xhr.send(null);

---

• 发送post请求
  

---

    xhr.open("post", "get_luckyNum.do", true);

三个参数和get差不多一样，不过在请求地址中，不再加入参数，这个参数会加载在最后的send里面

    xhr.send("name=mackyhuang");

这是第一个不同点
然后需要加上一个请求头
（按照http协议，如果发送的是post请求，那么在请求数据包中应该带有conntent-type请求头）默认情况下，ajax不会带有请求头，所以需要

    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

---

编写服务器端的程序

通常不需要返回完整的页面，只需要返回部分数据

编写function1()；

就是那个事件处理函数

    function function1()
    {
        //获取服务器返回的数据
        if(xhr.readyState == 4  && xhr.status == 200)
        {
            var txt = xhr.responseText();
            用txt的文件修改页面内容
        }

    }

整个的基本代码

设置响应函数

    <input id="username" type="text" name="username" onblur="check_name();">

get请求方式函数具体代码

    function check_name() {
        var username = document.getElementById("username").value;
        var msg = document.getElementById("msg");
        var xhr = getxhr();
        xhr.open("get", "check_login.do?username=" + username, true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200)
            {
                var txt = xhr.responseText;
                msg.innerHTML = txt;
            }
        };
        xhr.send(null);
    }

post请求方式函数具体代码

    function get_num()
    {
        var pLable = document.getElementById("lucky");
        var xhr = getxhr();
        xhr.open("post", "get_luckyNum.do", true);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200)
            {
                var txt = xhr.responseText;
                pLable.innerHTML = txt;
            }
        };
        xhr.send("name=mackyhuang");
    }

缓存问题

在使用ie浏览器发送get方式给ajax请求的时候，会有缓存问题 ，即只有第一次点击有效，接下来的每一次点击都没有响应 ，因为ie会判断请求地址是否访问过，如果访问过就会调用上次访问的结果来显示。
解决方式是在请求地址后方加上？随机数

编码问题

get提交方式，ie浏览器的ajax的编码的gbk， 其他浏览器的编码是utf-8，在服务器端的编码是iso-8859-1

• 在配置文件中配置URLEncoding=utf-8
• 然后使用javascript的内置函数EncodeURL，使其编码为utf-8，这个时候所有浏览器都会用utf-8来编码

post提交方式，所有浏览器的编码是utf-8，在服务器端的编码是iso-8859-1

• request.setCharacterEncoding(“utf-8”);

JSON

what is Json

是一种轻量级的数据交换格式
相对于xml来说，是轻量级的，解析速度更快，文档更小

语法

• {“”:”“,”“:”“}
  这里必须需要双引号
• 属性值可以是stirng number null object true/false
• 如果属性值是string,就必须要双引号

在服务器把对象转换成json

• 需要一个包 json-lib

  JSONObject jsonObject = JSONObject.fromObject(people);
  return jsonObject.toString();
  JSONArray jsonObject = JSONArray.fromObject(arrayList);
  return jsonObject.toString();
  

  包中的类 JSONObject 和 JSONArray， 分别是需要生成单个json，和json数组

浏览器把json转换成对象

• javascripe的内置对象JSON,需要他的一个方法，parse():

  var object = JSON.parse(jsonString);
  

jQuery 对 Ajax 的支持

$.ajax({})

{}是一个对象，里面的属性：

• url 请求地址
• data 请求参数
• type 请求类型
• dataType 返回的值的类型
• success 服务器返回成功的事件处理函数
• error 服务器返回异常的事件处理函数

编写一个ajax，每五秒返回八个数据到页面上面

表示层代码：

<script type="text/javascript">

    $(function(){
        setInterval(do_query, 5000);
    });

    function do_query()
    {
        $("#tb1").empty();
        $.ajax({
            "url":"query.do",
            "type":"post",
            "dataType":"json",
            "success":function(books){
                $("#tb1").empty();
                //alert(books);
                for(var i = 0; i < books.length; i++)
                {
                    var book = books[i];
                    $("#tb1").append("<tr><td>" + book.name + "</td><td>" 
                            + book.price + "</td><td>" + 
                            book.page + "</td></tr>");
                }
            }
        })
    }
</script>

服务器代码

    response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    String path = request.getRequestURI();
    String action = path.substring(path.lastIndexOf("/"), path.lastIndexOf("."));
    System.out.println(action);
    PrintWriter printWriter = response.getWriter();
    if("/query".equals(action))
    {
        ArrayList<Book> books = new ArrayList<Book>();
        Random random = new Random();
        for(int i = 0; i < 8; i++)
        {
            books.add(new Book("Java企业级应用开发" + random.nextInt(8888), 
                    88, 189 + random.nextInt(8888)));
        }
        JSONArray jsonArray = JSONArray.fromObject(books);
        String json = jsonArray.toString();
        System.out.println(json);
        printWriter.print(json);
    }

load

这是一个轻量级的ajax请求函数，
使用情况是，需要直接将返回的参数添加到一个标签上面的时候

在服务器端编写代码，然后在jsp中

$("#lucky").load("get_luckyNum.do");