Ajax的一些请求处理问题

Posted 2020-09-06 夏时未祭

对于以前的我来说，Ajax是一个迈不过去的坎，但是看了又看，总是能够学会，既然不能够迈过去那就跳过去。

 

 

        window.onload=function () {
            var btn=document.getElementById(‘btn1‘);
            btn.onclick=function(){
                var xhr=new XMLHttpRequest();
                xhr.open(‘get‘,"demo1.php",true);
                xhr.send();
                xhr.onreadystatechange=function () {
                    if (xhr.readyState ==4) {
                        if(xhr.status==200){
                            alert(xhr.responseText);
                        }else{
                            alert("Error:"+xhr.status);
                        }
                    }
                }
            }
        }

注：这是一个简单的demo，提交数据到demo1.php页面中。

书上的有些难以理解，最近看到看一个视频说，可以把xhr拟人化，所以，步骤：

1.生成一个ajax对象

2.打开浏览器

3.提交

4.得到数据

 

xhr对象调用的第一个方法是：open()方法

xhr.open("get","example.php",true);

open( )有三个参数，第一个参数为方法，get或者是post；第二个参数是提交的地址；第三个参数指的是是否异步，true：异步，false：同步。在大多数情况下是使用异步方法，因为同步方法会阻塞后面代码的执行。

调用open(）方法不会真的发送请求，而是启动一个请求以备发送。

xhr调用send()方法是发送请求

 

xhr.readyState：ajax工作状态。state有5个状态01234，其中4表示已经可以工作

1）0：未初始化。尚未调用open（）

2）1：启动。已经调用open（）

3）2：发送。已经调用send（）

4）3：接收。已经接收到部分响应数据。

5）4：完成。已经接收到全部数据，而且能够在客户端使用。

xhr.responseText返回的值一律都是字符串。ajax请求返回的内容存放在这个属性中。

xhr.onreadystatechange()：当状态值改变的的时候触发

xhr.status;服务器，http状态码（http的状态码有1，2，3，4，5开头），200表示成功

 

 

在实践中的请求处理：

get中

1）缓存处理：加上时间戳

比如：xhr.open(‘get‘,"demo1.php?username=ray&age=10&"+ new Date(),true);

注意：在时间戳之前那个“&”符号不能忘记写。

2）中文编码问题： encodeURL("xxxx")

xhr.open(‘get‘,"demo1.php?username="+encodeURL("小明")+"&age=10&"+ new Date(),true);

 

post中

数据放在send()方法作为参数传递

但是有一个问题就是，编码类型问题，处理这个问题，需要xhr.setRequestHeader(xxxxxx‘);

xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);

xhr.send(‘username=ray&age=10‘);//而且使用中文也没有问题。

post没有缓存问题。

中文也没有问题，自动进行url编码。