数据传送与Ajax请求

Posted 2020-10-14

传统的请求方式是通过表单来向服务器发送请求，这样的请求不可避免的会使得页面发生跳转或是刷新，从而使得带宽出现很大的浪费。为了解决这一问题，一种不能完全称之为新技术的新技术出现了，那就是Ajax技术，它很好的解决了这一问题，使得局部刷新成为可能。

Ajax实质来说只是js的一个对象，它发送送请求也是通过这一对象来实现的。也就是XMLHttpRequest对象。所以，对Ajax的学习实际上也就是在对XMLHttpRequest对象的属性以及方法进行学习。也可以说是，Ajax就是js模拟form表单进行请求的过程。

Ajax发送请求的步骤：

//创建Ajax对象也就是XMLHttpRequest对象

var xhr = new XMLHttpRequest();
//var info="id=1&name=shu";
//创建监听响应状态事件

xhr.onreadystatechange=function(){
//判断响应状态也就是判断后台服务器响应的数据有没有被接收到    
    if(readyState == 4){
//响应回来的数据的接收存储格式文本格式还是xml格式responseText/responsexml
        console.log(responseText);
    }
}

//建立请求
xhr.open("get",‘fileName.php?id=1‘);
//发送请求,get形式直接在url后面加上要请求的信息，无需通过send传参发送所以直接写入null就可以了
//如果是post就需要在send中写入需要请求的信息
    //xhr.open(‘post‘,‘fileName.php‘);
    //xhr.send("id=1&name=shu");/xhr.send(info);
//并且如果是通过post传递数据，就像form表单那样，就需要使用 setRequestHeader() 来添加 HTTP 头（请求头）。然后在 send() 方法中规定您希望发送的数据：（可以直接写也可以通过变量来写）
xhr.send(null);


注意：这里应该清楚一点，那就是XMLHttpRequest对象的请求方法默认采用的是异步请求，也就是说这个js在运行的时候，不会等到请求得到服务器的响应才继续执行条件语句。
他不会管另一个进程的状态如何，也就是说很有可能会出现当程序运行到需要响应数据的时候，服务器的响应却还在路上。这样就会出现报错或者看不到任何结果的情况。所以就需要让这边直到传递的进程到底如何，这也是readyState的作用，它记录着整个请求的状态从0到4；0代表刚创建，1代表请求发送，2代表请求，3代表还在传输中，4代表响应数据发送完毕。
可是if只是一种单纯的顺序结构，他依旧是会逐条去顺序执行程序的，所以就需要绑定一个事件作为监听着时时地向着这边来汇报数据的传输情况。
而XMLHttpRequest正好提供了这一对象，也就是onreadystatechange，它代表着每当readystate状态发生改变时就触发这一事件的处理程序。

实际上，如果不想这样用的话，你只要加上open的第三个参数也可以，也就是将异步请求转化为同步请求

xhr.open(‘get‘,‘file_upload.php‘,false);//默认的是true，也就是异步请求，不过需要将条件语句放到后面

var xhr=new XMLHttpRequest();

    xhr.open(‘get‘,‘file_upload.php‘,false);
    xhr.send(null);
    if(xhr.readyState==4){
                alert(xhr.responseText);
            }

//post传值：

    var xhr=new XMLHttpRequest();
    var info="name=jon&id=1";
    xhr.open(‘post‘,‘file_upload.php‘,false);
    //在form表单传值中默认的就是application/x-www-form-urlencoded；还有一种则是在文件上传的时候使用的enctype=”multipart/form-data”;否则无法传值
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(info);
    //alert(xhr.responseText);直接弹出也是完全一样的
    if(xhr.readyState==4){
                alert(xhr.responseText);
            }

除了上面的这种做法：还可以利用js中window的onload来实现这种效果
onload属于window对象的一个事件，代表的着当页面加载完成后执行其绑定的事件处理程序，所谓加载完成，也可理解为在页面出现刷新的时候，也就代表着页面开始加载数据了。而Ajax一旦出现刷新也就代表着数据正在响应加载中，这也从侧面证明了Ajax确实是进行了页面的重新加载。

    var xhr=new XMLHttpRequest();
    var info="name=jon&id=1";

    window.onload=function(){
        alert(xhr.responseText);
    }

    xhr.open(‘post‘,‘file_upload.php‘,false);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(info);