原生ajax请求的五个步骤

全栈程序员站长

发布于 2022-08-29 17:31:18

96700

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

什么是ajax？ 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ajax的优点： 1.实现局部更新（无刷新状态下） 2.减轻了服务器端的压力 ajax的缺点： 1.破坏了浏览器前进和后退机制（因为ajax自动更新机制） 2.一个Ajax请求多了，也会出现页面加载慢的情况。 3.搜索引擎的支持程度比较低。 4.ajax的安全性问题不太好（可以用数据加密解决）。注：如果要使用ajax必须要有后端环境的支持（服务器端）。 原生ajax请求的五个步骤： 1.实例化请求对象 2.建立服务器链接 3.监听服务器响应 4.发送请求 5.响应成功，传递参数 http请求的两种方式： get：用于获取数据，get是在url上传递数据（网址后面的东西），存储量较少，安全系数比较低。 post：用于上传数据，容量几乎是无限（多用于表单）。

 //1.实例化请求对象
    var http=new XMLHttpRequest ();
 //2.建立服务器链接
          //1.请求方式   get post
          //2.url    服务器接口
          //3.async     指当前请求是同步还是异步     true/false
          //同步：请求完成后去执行后续代码（等待请求完成 ）        false
          //异步：请求和后续代码同时执行（不需等待，所有代码同时执行）   true
          //4.5.  用户名和密码，（为了安全）
    http.open();
 /*3.监听服务器响应 1 2 3 4 服务器响应状态 404（页面丢失 200（成功 500（服务器报错*/
    http.onreadystatechange =function(){ 
   
        //服务器响应 if(http.readyState ==4&&http.status ==200){ 
   
        //5.响应成功，传递参数
            //可以获取数据
            //服务器返回是json
            http.response
            http.responseText
            //后台返回数据是XML（自定义的html格式）
            http.responseXML
        }
    }
    //4.发送请求
           //send方法的参数取决于请求方式    get post
           //get   url+"?id=1&name=111"
           //post   send()    方法，传递参数
    http.send();

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145432.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月1，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax