原生ajax请求的五个步骤

2022-08-29 17:31:18 浏览数 (1)

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

什么是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:用于上传数据,容量几乎是无限(多用于表单)。

代码语言:javascript复制
 //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

0 人点赞