了解Ajax及Ajax如何发送请求

当前位置:

首页 > temp > JavaScript教程 >

了解Ajax及Ajax如何发送请求

由于JavaScript能力有限，它所提供的API都只停留在单机阶段。这样会造成一些功能无法实现，如：无法实现用户登录时，用户在输入用户账户时显示用户对应的头像；无法实现用户注册时，用户输入账号或用户名时提示是否存在；无法实现在留言板功能看到最新的用户留言。

上述这些问题的共同点就是：数据存放在服务端，无法通过已知的API获取。而Ajax的出现就解决了这些问题。

已知的发送请求的方式，就是在地址栏输入地址，回车刷新，对特定的元素的href或src属性，表单的提交，使用ajax通过JavaScript直接发送网络请求，对服务器发出请求并接受服务端返回的响应，这样实现的功能会更多，不再是单机游戏。

此时Ajax的出现就解决了这些问题

Ajax（Asynchronous JavaScript and XML）是浏览器端进行网络编辑（发送请求、接受响应）的技术方案。可以通过JavaScript直接获取服务端最新的内容而不必重新加载页面（局部刷新）。

Ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应，实现通过JavaScript进行网络编程。
通常应用于自动更新页面内容，局部刷新页面，用户数据校验，按需获取数据。

这里展示一套原生Ajax发送请求步骤

//发送ajax请求步骤
  
 //1 创建一个XMLHTTPRequest 类型的对象 --- 相当于打开了一个浏览器
// var xhr = new XMLHttpRequest();
// 如下是 IE6 兼容写法法
var xhr = null;
if (window.XMLHttpRequest) {
      // 标准浏览器
       xhr = new XMLHttpRequest;
} else {
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }
// 请求未发送前的一个状态----unsent--0
 console.log("UNSENT",xhr.readyState);

//2 打开一个与网址之间的连接 --- 相当于在地址栏输入网址
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
//open（方法method，接口地址url）方法 
// 开启请求  get、post、put、delete，获取、提交、更改、删除
// 刚打开连接，但是还未发送  OPENDED---1
console.log("OPENED", xhr.readyState);
// setRequestHeader() 
// 设置请求头
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//若是get方法，不需要在send中传参数,也不用设置请求头
//因为它的参数都写在网址上了（不需要再在send中传参数）
// xhr.open("GET", "https://jsonplaceholder.typicocde.com/users?id=1");
//post
// xhr.open("POST","https://jsonplaceholder.typicocde.com/users");
// xhr.send("name=harry&age=19");
  
//3 通过连接发送一次请求  --- 相当于点击回车或者超链接
xhr.send("name=harry&age=19");
// send（数据体），在发送请求时，当需要发送一些数据或者给数据库写入、更改数据时，就需要传递数据体
// 传递的数据体，要根据 请求头 中的类型进行传参
// 所以在send之前 ，open之后，需要设置一个方法 --- setRequestHeader()
// 如上；
  
//4 指定xhr状态变化事件处理函数 --- 相当于处理网页呈现后的操作
//指定回调函数，处理得到的数据
xhr.onreadystatechange = function(){
//通过判断 xhr 的readyState，确定此次请求是否完成
if(this.readyState === 2){
      console.log("headers received",xhr.readyState);
      console.log(xhr.responseText)
}else if(this.readyState === 3){
       console.log("loading",xhr.readyState)
       console.log(xhr.responseText)
}else if(this.readyState === 4){
       console.log("done",xhr.readyState)
       console.log(xhr.responseText)
      }
}

发送Ajax请求步骤：

①创建XMLHttpRequest类型的对象

②准备发送，打开与一个网址之间的连接

③执行发送动作

④指定xhr状态变化事件处理函数

其中，XMLHttpRequest 类型对象是Ajax API中核心提供的XMLHttpRequest类型，所有的Ajax操作都需要使用到这个类型。

var xhr = new XMLHttpRequest（）；
或 xhr = new ActiveXObject（”Microsoft.XMLHTTP“）；（IE6兼容）

本质上XMLHttpRequest就是JavaScript在web平台上发送HTTP请求的手段，所以发送出去的仍然是HTTP请求，符合HTTP约定的格式。

open（）方法开启请求，xhr.open(请求方法.url)
- 发送请求方式有：get、post、delete、put
  - get 请求，获取或查询数据，在get请求中，参数的传递是直接在url上通过 ‘ ? ’进行参数传递的；get请求时，无需设置响应体。
  - post 请求，post请求中，使用请求体来承载需要提交的数据，与get请求相比更安全；post请求需要设置请求头Content-Type，便于服务端接收数据。
  - put 请求，更新数据请求
  - delete 请求，删除数据请求
  - xhr.open（）方法还有第三个参数，第三个参数要求传入的是一个布尔值，作用就是设置此次请求是否采用异步方式执行。默认值是true，表示异步，false是同步执行。这里不建议同步执行，否则代码会卡死在send（）这一步。
    
    【关于，同步与异步的理解：
    - 同步就是一个人在做一件事时，同一个时刻只能做一件事，做完这件才能做下件事，其他事情只能等待；
    - 异步就是一个人在做一件事时不需要等待这件事完成，可以做其他事。】
- setRequestHeader（）方法设置请求头，这个方法必须在open（）和send（）之间调用。xhr.setRequestHeader（header，value）；
  
  其中：
  header一般都设置为 ”Content-Type“，传输数据类型，服务器需要传输的数据类型；
  
  value则是具体的数据类型，常用”application/x-www-form-urlencode“ 和 ”application/json“
send（）方法发送请求，用于发送HTTP请求，xhr.send(数据体)，数据体是根据请求头中的类型进行传参；如果是get方法，无需设置数据体，你可以传null或者不传参。

【通常为了确定事件一定会触发，在发送请求send（）之前，一定先注册readystatechange，这样不论是同步还是异步都能触发成功】

readyState属性返回一个XMLHTTPRequest代理当前所处的状态，由于readyStatechange事件是在xhr对象状态变化时触发的，所以这个事件会被触发多次，它有5个不同的状态值：

readyState	状态描述	说明
0	UNSENT	xhr被创建，但还未调用open（）方法;（初始化）
1	OPENED	open（）方法被调用，建立连接；（建立连接）
2	HEADERS_RECEIVED	send（）方法被调用，获取到了状态行和响应头；（接收到响应头）
3	LOADING	响应体下载中，部分数据已经在responseText中了；（响应体加载中）
4	DONE	响应体下载完成，可以直接使用responseText了；（加载完成）

一般情况下，在readyState值为4时，执行响应的后续逻辑，如：一些事件函数等。
xhr.onreadystatechange = function(){
if(this.readyState == 4){
//后续的逻辑.......
}
}

本文链接：https://www.cnblogs.com/dreamtown/p/14728932.html

栏目列表