帮你弄懂什么是Ajax【2】—— ajax如何实现

86 阅读2分钟

这是我参与8月更文挑战的第18天,活动详情查看:8月更文挑战

aiax技术简介

ajax 全称 Asynchronous JavaScript and XML (异步JavaScript和XML) 实际上现在工作没有一个公司会使用XML当做后台、前台的中介文件,都是使用JSON。所以Ajax现在应该改名为Ajaj(Asynchronous JavaScript and JSON),但是大家还是约定俗成起名为Ajax。

Ajax上传文件的格式是.xhr 即XML Http Request

ajax如何实现

//Ajax的一个固定的模板:
//第1步创建一个xhr对象,使用new关键来调用一个内置构造函数
var xhr = new XMLHttpRequest();
//第2步指定接收回来的内容,怎么处理。监听xhr对象的onreadystatechange事件,这个事件在xhr对象的“就绪状态”改变的时候触发。我们只关心就绪状态为4的时候的事情。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//接收完文件要做的事情,让$el的内容变为读取的东西
  $el.innerHTML = xhr.responseText;
  }
}
//第3步创建一个请求,第一个参数是请求的类型get或者post,第二个参数就是请求的路径,第三个参数叫做是否使用异步机制
xhr.open("get","a.txt",true);
//第4步发送请求,圆括号里面是请求头内容,get请求没有报文头写null\
xhr.send(null);

1 XHR对象

Ajax完全依赖XMLHttpRequest对象,字面意思就是“XML文件的HTTP请求”对象。大家一般把new出来的变量叫做xhr。 let xhr = new XMLHttpRequest();

2 open方法

open方法表示让xhr对象配置一个请求,open字面意思是打开,就是打开一个请求。open之后并没有真正的发送请求,而是要用send()方法

open方法有三个参数:xhr.open(要发送的请求类型,路径,是否使用异步);

  • 第一个参数,要么是"get" 要么是"post"
  • 第二个参数,就是处理这个请求的路径url
  • 三个参数,表示是否是异步处理,必须写true

3 send()方法

send方法就是发送请求,里面的参数表示http requset报头里面携带内容。 get请求报头里面没有内容,post请求有内容。

get请求: xhr.send(null);
post请求,写的也是类似于get请求的参数字符串: xhr.send("name=aaa&age=18");