由于课程设计的安排,我对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;