Ajax-我说行！

2021-05-16 22:59:19 阅读：162 来源： 互联网

标签：异步 XMLHttpRequest 请求说行 Ajax 服务器 xmlhttp

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方法

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);
            }
        }

标签：异步,XMLHttpRequest,请求,说行,Ajax,服务器,xmlhttp
来源： https://blog.csdn.net/qq_45120080/article/details/116904756

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9