原生js的ajax请求

原生js的ajax请求

传统方法的缺点:

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

方法描述

abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”) 返回指定首部的串值
open(“type”,“URL”,[asyncFlag],[“userName”],[“password”]) 建立对服务器的调用。type参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content) 向服务器发送请求
setRequestHeader(“header”, “value”) 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post’方法一定要 )

五步使用法:

1.创建XMLHTTPRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.更新界面

下面给大家列出get请求和post请求的例子

get请求:

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}
}

post请求:

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了

 /**
         * type  请求方式
         * url   请求路径
         * data  向后端传递的数据
         * dataType   这里表示响应体的数据格式根据数据格式给对应的处理
         * success  是一个函数  当拿到响应体之后  就执行这个回调函数
         */
        function ajax(url, data, type, dataType, success) {
            // 异步对象
            var ajax = new XMLHttpRequest();
            // get 跟post  需要分别写不同的代码
            if (type == 'get') {
                // get请求
                if (data) {
                    // 如果有值
                    url += '?' + data;
                }
                // 设置 方法 以及 url
                ajax.open(type, url);
                // send即可
                ajax.send();
            } else {
                // post请求
                // post请求 url 是不需要改变
                ajax.open(type, url);
                // 需要设置请求报文
                ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                // 判断data send发送数据
                if (data) {
                    // 如果有值 从send发送
                    ajax.send(data);
                } else {
                    // 木有值 直接发送即可
                    ajax.send();
                }
            }
            // 注册事件
            ajax.onreadystatechange = function() {
                // 在事件中 获取数据 并修改界面显示
                if (ajax.readyState == 4 && ajax.status == 200) {
                    // console.log(ajax.responseText);
                    // 将 数据 让 外面可以使用
                    // return ajax.responseText;
                    // 当 onreadystatechange 调用时 说明 数据回来了
                    var res = xhr.responseText;
                    // 根据传入的数据类型进行处理
                    if (dataType == "json") {
                        res = JSON.parse(res);
                    } else if (dataType == "XML") {
                        // 进行转换
                        // 1. 创建转换对象
                        var parser = new DOMParser();
                        // 2. 调用转换方法
                        res = parser.parseFromString(res, "text/xml");
                    }
                    // 如果说 外面可以传入一个 function 作为参数 success
                    success(res);
                }
            }
        }