Ajax-我说行！

2024-04-12 22:03:50

Ajax-有手就行

什么是Ajax

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。

统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】

使用ajax的基本步骤 :

        1. 创建请求对象 （XmlHttpRequest）。
        2. 调用open方法 设置请求方式和请求路径  (get或post)
        3. 设置请求头 (get不需要设置请求头  post请求需要设置 - setRequestHeader()) 
        4. 监听响应完成事件  (onreadystatechange)
        5. 发送请求  (get不需要填写参数，post需要填入希望发送的数据）

创建请求对象

考虑浏览器的版本不同版本创建不同的ajax引擎。
主要考虑IE低版本和较高版本

    var httpRequest;
 
    if(window.XMLHttpRequest) {
 
        //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
        httpRequest = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
 
        //在IE6以下的版本
        httpRequest = new ActiveXObject();
    }

调用open方法

open(String method,String url,boolean asynch)：该方法创建http请求

第一个参数是指定提交方式(post、get)
第二个参数是指定要提交的地址是哪
第三个参数是指定是异步还是同步(true表示异步，false表示同步)

方法	描述
open (method,url,async)	method：规定请求的类型 url:文件在服务器上的路径 async:true(异步) or false(同步）

get和post的区别

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

两者主要的区别：

get方式，请求参数要在URl后面拼接键值对形式的信息。send方法不需要提供参数。
post方法，需添加请求头，请求参数在send方法中定义

监听响应完成事件 (onreadystatechange)

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readystate改变时，就会触发onreadystatechange 事件。
readyState 属性存有XMLHttpRequest的状态信息。

服务器响应
如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。

实例：

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }

send方法

整体实例

//1.创建核心对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2. 建立连接

        xmlhttp.open("GET","ajaxServlet?username=tom",true);

        //3.发送请求
        xmlhttp.send();

        //4.接受并处理来自服务器的响应结果
        xmlhttp.onreadystatechange=function()
        {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
               //获取服务器的响应结果
                var responseText = xmlhttp.responseText;
                alert(responseText);
            }
        }

码农公寓