原生ajax请求的五个步骤

全栈程序员-站长 • 2022年5月17日下午12:40 • 未分类 • 阅读 183

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

什么是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();