原生js实现ajax请求

Posted on Edited on In Views:

1 XMLHttpRequest 对象

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

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

2 案例

1）get 请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建异步对象
var ajax = new XMLHttpRequest();
// 设置请求的url参数，参数一是请求的类型，参数二是请求的url，可带参数传递到服务端
ajax.open("get", "getStar.php?starName=" + name);
// 发送请求
ajax.send();
// 注册事件 onreadystatechange
ajax.onreadystatechange = function () {
  if (ajax.readyState == 4 && ajax.status == 200) {
    // 正常响应，输出
    console.log(ajax.responseText);
  }
};

2）post 请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建异步对象
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);
  }
};