AJAX

定义:JavaScript 脚本发起 HTTP 通信(脚本发起通信)
步骤:
1.创建 XMLHttpRequest 实例
2.发出 HTTP 请求
3.接收服务器传回的数据
4.更新网页数据

XMLHttpRequest 实例

XMLHttpRequest对象是 AJAX 的主要接口,用于浏览器与服务器之间的通信。尽管名字里面有XML和Http,它实际上可以使用多种协议(比如file或ftp),发送任何格式的数据(包括字符串和二进制)。

XMLHttpRequest本身是一个构造函数,可以使用new命令生成实例。它没有任何参数

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/page.php', true);

一旦新建实例,就可以使用open()方法初始化 HTTP 请求头。
指定回调函数,监听通信状态(readyState属性)的变化

xhr.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}

readystate为4时表示,响应体已经下载成功

button.addEventListener('click', function () {
  var request = new XMLHttpRequest
  request.open('GET', 'url', true);//http方法
  request.send()
  request.onreadystatechange=()=>{console.log(request.onreadystate)}
//当前所处的状态改变一旦回调函数,
//当状态变为4的时候,即响应完毕请求体下载成功,
//这时回调函数就可以处理服务器传送回来的数据。
}
  1. 设置一个状态(如button的 click)
  2. 创建XMLHttpRequest对象
    3 初始化 XMLHttpRequest.open('method',''url',true)
    4 XMLHttpRequest.send()发送请求
  3. 可以通过onReadyStateChange属性,指定这个事件的监听函数,对不同状态进行不同处理。
request.onreadystatechange=()=>{
  if(request.status>=200&&request.status<=300){
      let string = request.responseText
      let object = window.JSON.parse(string)
      console.log('object.note.from')
}

下面的例子:
假设服务器返回的是JSON字符串
把从服务器接收到的符合JSON语法的字符串转换成js中的数据类型,让js能够调用。后端返回的只能是字符串
比如返回的是

{
  "note":{
      "from":"z",
      "to":"f"
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。