原生ajax与服务器端交互（详细步骤）

Posted 2021-07-18 yuwenS.

原生的ajax与后台交互

AJAX是一种不用加载整个页面页面的情况下，可以更新局部网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。这样可以使用户感受良好。

与后台交互的具体步骤

ajax与后台交互实现具体分为4个步骤

1. 创建异步对象 XMLHttpRequest： var xmlHttp = new XMLHttpRequest()
2. 给异步对象绑定事件 onreadystatechange： 当异步请求发起请求和接受数据时都会改变 readyState 的状态而触发这个绑定事件，并且是在这个事件中解析返回的数据、操作数据。
   readyState 的5个状态：
   0：创建异步对象时， new XMLHttpRequest();
   1: 初始异步请求对象， xmlHttp.open()
   2：发送请求， xmlHttp.send()
   3: 从服务器端获取了数据，并且解析这个数据，此时处于正在解析状态。
   4：数据解析完成，可以操作这个后端响应过来的数据了
3. 初始异步请求对象，通过 open() 初始请求对象：xmlHttp.open(请求方式get|post, “访问的URL”, 同步|异步请求（默认是true，异步请求))
   什么时候用get什么时候用post？
   1、get 更简单也更快，并且在大部分情况下都能用。
   2、更新服务器上的文件或数据库用post
   3、向服务器发送大量数据（post 没有数据量限制）post
   4、发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠
4. 使用异步对象发送请求
   如果是使用 get 请求方式并且有参数要响应给后台，一般在第三步中向访问的URL中拼接进去，然后第四步直接使用 send() 方法：***xmlHttp.send()***。
   如果使用 post 请求方式，一般将数据放在第四步并且要设置请求头信息，这个步骤是为了将发送的数据加密转码 setRequestHeader(‘content-type’,‘application/x-www-form-urlencoded’) 然后使用 send(要传入的值) 方法：xmlHttp.send(要传入的值)

补充一点： 异步对象的status属性，表示网络请求的状况的， 200， 404， 500， 需要是当status==200 时，表示网络请求是成功的

与后台交互的具体实现代码

get请求方式

 function 方法名() {   //一般这个实现步骤存在一个绑定的事件中
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function() {
                if( xmlHttp.readyState == 4 && xmlHttp.status == 200){ //当接受成功时和网络请求成功时，表明后端的数据已经成功发送过来了
                    var data = xmlHttp.responseText  //获取从后台传回并解析成功的数据
                }
            }
            // true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操
            // false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。
            xmlHttp.open("get","findStudenById?id="+id,true); //传入学生id查询学生信息使用这个URL地址
            //4.发送请求
            xmlHttp.send();
        }

要理解当发起请求和接受数据时都会改变readyState的状态而触发xmlHttp.onreadystatechange = function()这个绑定事件

post请求

 function 方法名() {   //一般这个实现步骤存在一个绑定的事件中
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function() {
                if( xmlHttp.readyState == 4 && xmlHttp.status == 200){ //当接受成功时和网络请求成功时，表明后端的数据已经成功发送过来了
                    var data = xmlHttp.responseText  //获取从后台传回并解析成功的数据
                }
            }
            // true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操
            // false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。
            xmlHttp.open("post","findStudentByID",true);
            //设置请求头信息 增加这一步 是为将发送的数据加密转码
            xmlHttp.setRequestHeader('content-type','application/x-www-form-urlencoded')
            //4.发送请求
            xmlHttp.send('id='+id);
        }

不过现在一般不用原生的ajax来进行与服务器的交互，而是通过JQuery和ajax结合来与服务器进行交互

JQuery和Ajax结合来与服务器交互的在这里：https://blog.csdn.net/qq_45334037/article/details/117692018