【前端】javascript__ajax基础知识入门

YJNldm 发布于2019-08-20 13:34 / 447人阅读

摘要：文章标题采用命名规范。所以，实际上是由微软发明了。将用于处理请求的函数绑定在对象的事件上即可。代表异步，代表同步。首先，这个函数需要跟踪请求的状态变化。如果状态返回值为，代表服务器响应完成，否则，你需要继续跟踪状态。使用来判断请求是否成功。

文章标题采用BEM命名规范。
因为笔者想重新夯实一下技术，因此翻译了MDN上的ajax介绍。英文原文

Ajax是啥

Ajax全名是Asynchronous javascript and xml，是一种利用xmlhttprequest对象与服务端脚本通信的机制。Ajax可以传输的数据格式包括JSON、XML、HTML和text文件。Ajax对Web应用带来巨大的变革的主要原因是，Ajax支持异步，一个页面可以在不进行整页刷新的情况下进行局部元素刷新，这个机制使得Web应用的交互体验更多的接近桌面应用。

Ajax的两大特性：

不用刷新页面即可向服务器请求数据

可以从服务端请求数据并进行处理

第一步：如何发起HTTP请求

为了能够通过javascript创建一个HTTP请求，你需要一个实现该功能的实体类，也就是XMLHttpRequest。一开始，由IE首先提出了一个叫做XMLHTTP的ActiveX 对象，然后火狐，safari和其他浏览器也开始在浏览器中内置XMLHttpRequest对象来实现XMLHttp的功能。所以，实际上是由微软发明了XMLHttpRequest。

//仅用于表面两者的关系，现在并不需要这样，XMLHTTPRequest已经被所有浏览器支持
if(window.XMLHttpRequest){    
   httpRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject){    
   httpRequest = new ActiveXObject();
}

接下来，你需要决定请求到的数据，怎么处理。此时，你需要告诉XMLHttpRequest对象用什么js函数来处理访问请求。将用于处理请求的函数绑定在xmlhttprequest对象的onreadystatechange事件上即可。

httpRequest.onreadystatechange = function(){   //这里放请求的处理逻辑。 }

现在，你可以开始发起请求了，请求对象的open和send方法可以用于发起请求。

httpRequest.open("Get","http://example.com",true);
httpRequest.send(null);

open（）是Http请求方法，第一个参数为请求类型，例如GET、POST、HEAD等（为了保证每个浏览器都能识别，这里请使用大写）。更多的Http请求信息请查看W3C specs

第二个元素是与请求的URL地址，切记不可跨域访问。如果的确想跨域，请查看HTTP access control

第三个元素是控制是否是异步请求。TRUE代表异步，FALSE代表同步。

在使用POST请求时，你可以利用send（）方法发送数据，格式可以是XML、JSON、SOAP等，也可以是查询字符串：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

在发送请求前，你还需要设置一下请求的MIME类型。

httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第二步处理服务器返回

上面已经讲了，你可以设置js方法来处理服务器请求。

httpRequest.onreadystatechange = nameOfTheFunction；

首先，这个函数需要跟踪请求的状态变化。如果状态返回值为XMLHTTPRequest.DONE（4)，代表服务器响应完成，否则，你需要继续跟踪状态。

if(httpRequest.readyState == XMLHttpRequest.DONE){
  //返回数据接收到的处理流程
}else{
  //请求还在继续
}

状态通过readyState来跟踪，状态的枚举值如下：

0(uninitialized)// 请求对象已经创建，尚未完成初始化（open方法还未调用）

1(loading)//open方法已经调用，send方法还未调用

2(loaded) //send方法已经调用，还没获取到数据返回

3(interactive) //一些数据已经返回，responseText还没完全返回

4(complete) //说有请求数据已经返回

下一个事情，是需要检查HTTP的服务端返回码。使用200 ok来判断请求是否成功。

if(httpRequest.status === 200){
  //成功请求
}else{
  //请求有问题，比如404（请求地址没找到）500(内部服务器错误)
}

所有的服务端返回码请查看W3C site

现在，在你检查完请求状态和HTTP状态码后，你可以开始随心所欲的处理请求数据了。你可以使用下面两种数据模式：

httpRequest.responseText -以文本格式返回数据

httpRequest.responseXML -以XML对象形式返回数据，后续可以在JS中转化为JS对象

注意：上面说的流程是异步流程，在同步流程中，不用这么麻烦，你可以在send（）方法后直接获取请求数据。

第四步示例

示例项就不翻译了，感兴趣的童鞋可以查看原文示例

GPU云服务器云服务器 javascript__ajax javascript入门基础 javascript基础入门 javascript入门基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81122.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
前端资源合集下载

摘要：权威指南参考手册链接密码禅意花园高清源码链接密码与权威指南配套源码链接密码基础教程链接密码锋利的加源码链接密码游戏开发实战高清完整版链接密码与入门经典第版链接密码前端开发规范手册链接密码高级标准解决方案链接密码变幻之美网页布局揭秘 CSS权威指南-pdf+参考手册链接: https://pan.baidu.com/s/1miR62vQ 密码: vs4g css禅意花园高清pdf...

hyuan 2019-08-01 18:28 评论0 收藏0
前端资源合集下载

摘要：权威指南参考手册链接密码禅意花园高清源码链接密码与权威指南配套源码链接密码基础教程链接密码锋利的加源码链接密码游戏开发实战高清完整版链接密码与入门经典第版链接密码前端开发规范手册链接密码高级标准解决方案链接密码变幻之美网页布局揭秘 CSS权威指南-pdf+参考手册链接: https://pan.baidu.com/s/1miR62vQ 密码: vs4g css禅意花园高清pdf...

pkhope 2019-08-22 14:03 评论0 收藏0