WebStorm前端开发分享：基于html5+css+js开发前端项目，用ajax技术获取后端数据前端qq44830054的博客-

由于课程设计的安排，我对H5+css样结合js技术对开发前端项目有了更深的了解。随后又学习ajax的使用方法，下面，我将讲一下我所学到的关于ajax的知识。

一，ajax是什么

全称：asynchronous JavaScript and XML ；（基于XML的异步JavaScript） 通俗的说，就是通过ajax技术将后端的数据拿出来然后在前端页面中显示出来。 也相当于异步的JS和XML，要明确ajax不是一种编程语言，它不需要任何浏览器插件，但需要用户允许JS在浏览器上面执行。

二，ajax的工作流程

三，ajax工作中比较重要的对象

1，XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

对于大多数浏览器来说均支持 XMLHttpRequest 对象；但也有少部分不支持，如：IE5 和 IE6 则使用 ActiveXObject对象；
（在这里因为基本上很多浏览器都支持XMLHttpRequest ，所以就不在讲解ActiveXObject的使用啦。）

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest(); 

创建ActiveXObject对象的语法：

variable=new ActiveXObject("Microsoft.XMLHTTP"); 

四，ajax向服务器发送请求及相应

请求；

直接上代码啦，，，

xmlhttp.open(method,url,async); xmlhttp.send(); 

PS———如下：
代码中：open方法里面三个参数分别是；
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

对于method参数：一般选用get， 只有以下情况才使用post
1.更新服务器上的文件或数据库
2.向服务器发送大量数据的时候
3.发送包含未知字符的用户输入的时候

url：就是你所请求的服务器的链接地址

async：true（异步）或 false（同步）只有这两种情况，所以根据情况选择。

响应；

XMLHttpRequest 对象的两个 responseText 或 responseXML 属性
responseText：获得字符串形式的响应数据。如果服务器的响应不是XML文件的时候所用的响应；
responseXML：获得 XML 形式的响应数据。只有服务器获得XML文件类型的时候所做出的响应；

ajax执行中所涉及的事件

在执行任务的时候会有两个属性：分别是readyState和status

readyState属性会有四个状态的存在，分别是：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status属性有两个状态：
200: “OK”
404: 未找到页面

也就是说，当readyState=4和status=200同时成立的时候表示响应已经就绪；

关于ajax重要参数属性基本就这些，下面我一下我的课程设计所运用的ajax技术。

初始页面如下：

点击刷新之后的页面如下（所得到的数据是在后台数据库所获取的）

代码解析如下：

详细代码在这儿：

 //第一步：创建一个请求对象（负责要数据）         var xhr = new XMLHttpRequest();  //第二步：建立与服务端的连接（找到那个服务器去要数据，我所用到的服务器地址是已经创建好的，并且在服务器里面已经创建好了测试的接口）        xhr.open('get','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus'); //设置头信息，告诉服务器让数据以表单的形式传递过去         xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");         //    第三部：向服务端发送请求         xhr.send();         //    第四部：接收服务端返回的数据         xhr.onreadystatechange = function (){ //xhr.readyState=4代表数据请求完成； xhr.status == 200 代表数据返回成功             if(xhr.readyState=4 && xhr.status == 200){                 var responseData = JSON.parse(xhr.responseText);//json串   JSON.parse() 方法用于将一个 JSON 字符串转换为对象。                 var sa = responseData.data;                 var h3 = document.getElementById("title");                 var h4 = document.getElementById("subTitle");                 var p = document.getElementById("info");                 h3.innerHTML = sa.title;                 h4.innerHTML = sa.subTitle;                 p.innerHTML = sa.info; 

以上就是我的Ajax的学习之谈啦，希望能给大家带来帮助。