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

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

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

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

Ajax(Asynchr@ N m 7 ronouq $ M ; B . Fs JavaScript and XML)是浏览器端进行网络编辑(发送请求、接受响应)的技术方案。可以通过JavaScript直接获取服务端最新的内容而不必重新加载页面(局部刷新)。

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

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

//发送ajax请求步骤
//1 创W , D p建一个XMLHTTPRequest 类型的对象 --- 相当于打开了一个浏览器
// var xhr = new XMLHttpRequest();
// 如下是 IE6 兼容@ N R N写法法
var xhr = null;
if (9 D ewi{ B 2 Z , P 9 3 indow.XMLHttp_ Q ~ P r gRequest) {
// 标准浏览器
xhr = new XMLHttpRequest;
} else {
xhr = new Acti& | 4 wveXObject("Microsoft.XMLHTTP");
}
// 请求未发送前的一O } S v个状态----unsent--0
console.log("UNSENT",xh) [ t I R w z N =r.readyState);
/@ J 5 O/2 打开一个与网址之间的连接 --- 相当于在地址栏输入网址
xh, U c v M - \r.open("GET","https://jsonplaceholder.typicode.com/use, 8 + ^ t B ( W /rs");
//open(方法method,接口地址url)方法
// 开启请求  get、post、put、delete,获取、提交、更改、删B J 1 5 4 m除
// 刚打开连接,但是还未发送  OPENDED-2 T r--1
console.log("OPENED", xhr.readyState);
// setRequestHeader()
// 设置请求头
// xhr.setRY N 6 D - , 1 N &equestHeader("Content-Type","application/C * 9 Hx-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 通过连接发送一次请求  --- 相当于点击回车或者i y =~ ` G E 2 Z ]链接
xhr.send("name=harry&age=19");
// sa V w 9 L yend(数据体),在发送请求时,当需要发送一些数据或者给数据库写入、更改数据时,就L 5 / z需要传递数据体
// 传递的数据体,要根据 请求头 中的类型进行传参
// 所以在send之前 ,open之后w U T J O 4 # f,需+ S V P + i [ 1 `要设置一个方法 --- seA ; @ i ;tRequestHeader()
// 如上;
//4 指定xhr状O Q 8 h d w态变化事件处! b 8 x u F理函数 --- 相当于处理网页呈现/ V ? 7 J R j后的操作
//指定回调函数,处理得到的数据
xhr.onreadystatechange = function(){
//通过判断 xhrj w 3 y , m X - x 的readyState,确定此次请求是否完b 0 V成
if(this.readyState === 2){
console.log("headers received",xhr.readF # V 7 hySta0 \ 2 P Q (te);9 I q \ c 4 !
console.log(xZ j W q @ Y | Ohr.responseText)
}else if(this.readyState === 3){
console.log("loading",xhr.reX k | | ;adyState)
console.log(xhr.responseText)
}else if(thir : C Y \ { r E {s.readyState === 4){
console.log("done",xhr.readyState)
console.log(xhr.responseText)
}
}

发送Ajax请求步骤:

c 2 T S g创建XMLHttpRequest类型的对象

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

③执行发送动作

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

其中,XMLHttpRequest[ { [ – o 类型对象是Ajax API中核心提供的XMLHttpReq= R J F 9uest类型,所有的Ajax操作都需要使用到这个类型。

​ var xhrD j ~ $ = new XMLHttpRequest();
​ 或 xhr = new ActiveXObject(”Microsoft.XMLHTTP“);(IE6兼容)

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

  • open()方法开启请求,xhr.o? T h |pen(请求方法.url)

    • 发送请求方式有:get、post、del0 # G F $ k @ete、put

      • get 请求,获取或查询数据,在get请求中,参数的传递是直接在url上通过 ‘ ? ’进行参数传递的;get请x = u s R求时,无需设置响应体。

      • post 请求,post请求中,使用请求体来承载需要提交的数据,与get请求相比更安全;post0 i y [ ] \请求需要设置请求头Content-Type,便于服务端接收数据。

      • put 请求,更新数据请求

      • delete 请求,删除数6 8 q D据请求

      • xhr.open()方法还有第三个参数,第三个参数要求传入的是一个布尔值,作用就是设置此次请求是否采用异步方式执行。默认值是true,表J \ g T U b Y示异步,false是同步执行。这里不建议同步执行,否则代码会卡死在T 1 b Y Esend()这一步。

        【关于,同步与异步的理解:

        • 同步就是一个人在做一件事时,同一个时刻只能做一件事,做完这件才能做下件事,其他事情只能等待;

        • 异步就是一个人在做一件事时不需要等待这件事完成,可以做其他事。】

    • setRequeG b P } n IstHe1 e 7 ^ ^ader()方法设置请求头,这个方法必须在open()和seY . 5 | j ] Fnd()之间调用。xhr.setRequestHeader(header,value);

      其中:
      ​   header一般都设置为 ”c b k 9 ! kContent-Type“,传输数据类型,服务器需要传输的数据类型;

      ​   value则是s B F z具体的数据类型,常用”application/x-www-form-urlencode“ 和 ”application/json“

  • send()方法发送请求,用于发送HT] a – LTP请求,xhr.sendX } 7 F g { – q(数据体),数据体是A p – 3 ; # (根据请求头中的类型进行传参;如果是get方法,无需设置数据体,你可以传O 4 Xnull或者不传参。

    【通常为了确定事件一定会触发,在发送请求send()之前,一定先注册ready/ [ o W \ |statechange,这样不论是同步还是异步都能触发{ p 2 , D成功】

  • readyState属性返A S 4 9 G回一个XMLHTTPRequest代理当前所处的状态,由于readyStatechange事件是在xhr对象状态变化时触k n G 7 5 : R发的,所以这个事件会被触发多次,它有5个不同的状态值:

    readyState 状态8 ` W c f x , J描述 说明
    0 UNSENT xhr被创建,但还未调用open()方法;(初始化)
    1 OPENED open()方法被调用,建立连接;(建立连接)
    2 HEADERS_RECEIVED send()方法被调用,获取到了状态行和响z K [ 4 \ B应头;(接收到响应头)
    3 LOADING 响应体下载中,部分数据已经在responseText中了;(响应l T @ u体加载中)
    4 DONE 响应体下载完成,可以直接使用respons2 9 / V ^ o Y ?eText了;(加载完成)

    一般情况下,在readyState值为4时,执行响应的后续逻辑,如:一些事件函数等。
    xhr.onreadystatechange = functionX e X 9 3 Y #(){
      if(this.O i q S \ JreadyState == 4){
        //后续的逻辑…….
      }
    }

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注