欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AJAX:post方式 AND get方式

程序员文章站 2024-01-19 11:37:10
...

A.名词解释

           1.Synchronize (同步)

                 在一个任务进行时,不能开启其他任务

                  同步访问:浏览器在向服务器发送请求时只能等待服务器响应,不能做其他事情。

                   ex:

                      a. 地址栏访问 页面(www.baidu.com)

                       b. a标记的默认跳转

                       c.submit按钮的表单提交

             2.Asynchronous(异步)

                   在一个任务进行中时,可以开启其它的任务

                   异步访问:浏览器在向服务器发送请求时,不耽误用户在网页上做其他的操作。

                       ex:

                         a.用户名的重复验证

                         b.搜索提示

                         c.聊天室

                         d.股票走势

B. AJAX(Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)) 

       1.本质

         使用js提供的异步对象(XMLHttpRequest)(xhr),异步的向服务器发送请求,并接受相应数据(数据类型是Xml)

         AJAX请求中,服务器响应回来的是部分数据而不是完整页面,并且可以以无刷新效果来更改页面的局部内容。

AJAX:post方式 AND get方式

          2.创建xhr对象

              标准创建:

                     var xhr=new XMLHttpRequest()

                IE8以下:

                     var xhr=new ActiveXObject("Microsoft.XMLHttp")(注意符号)

                  允许通过window.XMLHttpRequest来判断浏览器是否支持标准创建,如果浏览器不支持标准创建

                   那么window.XMLHttpRequest的值就是null

                            if(window.XMLHttpRequest){

                                     var  xhr=new XMLHttpRequest();

                             }else{

                                    var xhr=new ActiveXObjext("Microsoft.XMLHttp");  

                           }       

           3.XHR常用方法和属性(常用重点)

                  a.  open()

                      xhr.open("method","url",isAsyn) ; 

                         1.method

                               string 类型

                                请求方式:get/post             

                          2.url

                                string类型  

                                请求地址

                          3.isAsyn

                             boolean类型

                             指定采用同步(false)还是异步(true)的方式发送请求

                   b.readyState 属性

                          作用:表示xhr对象的请求状态

                           值:0-4表示5个状态

                                0:请求尚未初始化

                                1:已经打开服务器的链接,正在发送请求中

                                2:请求完成

                                3.正在接受服务器端的响应

                                4.接收响应数据成功

                            (当readyState的值为4时,才表示所有响应都已经接收完毕)

                   c.status属性

                          作用:服务器的响应状态码

                           值:

                                记住一个值:200

                             当status的值是200时,表示服务器已经正确处理请求并给出响应

                    d.onreadystatechange事件

                            作用:当xhr的readyState属性值发生改变时要自动激发的操作

                               (在xhr对象的状态改变时,这个事件会一直监视它)

                             判断xhr的状态为4并且xhr的status的值为200时,就可以获取/响应数据

                             语法:

                              onreadystatechange=function(){

                                     if(xhr.readyState==4&&xhr.status==200){

                                             //接收响应回来的值  

                                            var resText=xhr.responseText;

                                             console.log(resText);

                                                }

                                        }

                        e.  send()

                               作用:发送请求

                                语法:xhr.send(body)

                                        body:请求主体

                                        如果没有请求主体,body位置处为null(get),如果有请求主体,则

                         放请求主体数据到body位置(post)

                      发送异步请求的步骤:

                                a.创建xhr对象

                                b.创建请求
                                c.设置xhr的onreadystatechange(回调函数)

                                    判断状态,并接收响应回来的数据   

                                d.发送请求 

                                                                                                                                                                                                    

                        f.

                  get

                  使用get提交方式,发送请求数据(带参数)

                           http://127.0.0.1/login.php?uname=value1&upwd=value2

    function CreateXhr() {
      var  xhr= window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft XMLHttp")
        return xhr
    }
    console.log(CreateXhr())
var i1=document.getElementById("i1")
     i1.addEventListener("click",function () {
        //创建xhr对象
         var xhr=CreateXhr()
         //创建请求
         var value="xiaoming";
         xhr.open("get",`demo01.php?uname=${value}`,true)
             //设置回调函数
         xhr.onreadystatechange=function () {
             //判断readyState和status
             if(xhr.readyState==4&&xhr.status==200){
                 //接收响应数据
                 var resText=xhr.responseText
                 console.log(resText)
             }
         }
         //发送请求
         xhr.send(null)
     })

                      post

                       使用ajax发送post请求

                               注意:

                                     post请求将数据放在请求主体中

                                        xhr.send(body)

                                        ex: xhr.send("uname=value1");

                                      在发送请求(send)之前需要手动修改请求头 

                                          xhr.setRequestHeader("Content-Type":"application/x-www-form-urlencoded");

      function CreactXhr() {
              var xhr=window.XMLHttpRequest? new XMLHttpRequest():ActiveXObject("Microsoft XMLHttp")
              return xhr
          }
          function login() {
              //创建xhr
               var xhr=CreactXhr();
               //创建请求
              xhr.open("post","post.php",true)
              //设置回调函数
              xhr.onreadystatechange=function () {
                  if(xhr.readyState==4&&xhr.status==200){
                      var res=xhr.responseText;
                      d1.innerHTML=res;
                  }
              }
              //更改请求消息头(get方法没有)
              xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
              var uname=name1.value;
              var upwd=pwd.value;
              //请求主体(get方法没有请求主体)
              var msg=`uname=${uname}&&upwd=${upwd}`;
              xhr.send(msg)
          }

                                       

                                               

                             

 

                       

相关标签: AJAX post get