web前端学习笔记28-Ajax——用户体验提升者

一、Ajax简介

1.1 什么是Ajax

A javaScript a XML,是指一种创建交互式网页应用的网页开发技术,不需要刷新或者跳转页面就可以实现数据通讯。Ajax有同步和异步两种请求方式(不推荐使用同步操作)。
同步与异步

【同步与异步】
web前端学习笔记28-Ajax——用户体验提升者_第1张图片
web前端学习笔记28-Ajax——用户体验提升者_第2张图片

1.2 早期Ajax的应用

google地图最先将Ajax应用到极致

1.3 Ajax的应用场景

百度地图类、百度图片类、瀑布流、数据验证、实时数据请求…

1.4 Ajax的工作原理

Ajax是一种能够实现异步请求的机制,也正是这种机制的存在才能够使得页面在不刷新的基础上能够访问服务器或者刷新页面等操作

二、XHR对象

Ajax的技术实现借助浏览器提供的XHR对象,该对象是由XMLHttpRequest原型实例化而来,系统提供的是XMLHttpRequest对象原型,需实例化后使用。

<script>
	// XHR对象 XMLHttpRequest
	// 在浏览器中有构造方法和对象原型
	console.log(XMLHttpRequest);  //结果为构造方法
	console.log(XMLHttpRequest.prototype);  //对象原型
	// 实例化一个XHR对象
	var xhr=new XMLHttpRequest();
	console.log(xhr);  //对象实例
script>

2.1 XHR对象成员属性

关键字 释义
readState XHR对象请求的状态信息码(客户端的信息代码)★
response ajax请求的响应信息对象
responseText ajax请求的响应信息字符串格式 ★
responseType ajax请求的响应信息的格式
responseURL ajax请求的响应信息地址
responseXML ajax请求的响应信息XML格式
status ajax请求的响应信息(服务器端的相应信息代码)★
statusText ajax请求的响应信息字符串

2.2 Ajax请求过程中的相关事件

关键字 释义
onabort 在Ajax请求中止的时候
onerror 在Ajax请求出错的时候
onload 在Ajax加载请求的时候
onloadend 在Ajax加载请求结束的时候
onloadstart 在Ajax加载请求开始的时候
onprogress 在Ajax加载请求过程中的时候
onreadystatechange 在请求状态改变的时候 ★

2.3 XHR对象成员方法

关键字 释义
open() 建立一个ajax连接 ★
open(方法字符串,请求的URL,使用异步还是同步);
send() 发送一个ajax连接 ★
abort() 终止一个ajax请求
setRequestHeader() 设置请求的头信息
getResponseHeader() 获取头信息设置
getAllResponseHeaders() 获取所有头信息组成的数组

post头信息设定"Content-Type","application/x-www-form-urlencoded"
get请求与post请求
get请求: 好比发送明信片,数据会在地址栏中显示,发送数据有长度限制
post请求: 好比发送信封,数据不会在地址栏中显示,发送数据长度取决于服务器

2.4 http响应状态信息码

100系列
     表示服务器理解了请求但是没有完成需要继续操作
200系列
     表示服务器成功响应了请求
         200表示请求响应成功OK ★
300系列
     表示服务器进行了重定向操作
400系列
     表示客户端请求错误
         403 表示没有权限进行访问 ★
         404 表示找不到指定的文件 ★
500系列
     表示服务器端有错误

简单ajax流程示例代码

<body>
	<textarea>春眠不觉晓textarea>
	<hr />
	<button id="getAjax">点击使用ajaxbutton>
	<script>
		// 简单ajax流程_get请求————————————————————————————
		// 文件放在D:\phpStudy\PHPTutorial\WWW目录中使用localhost/c31_Ajax.html打开
		// 获取按钮
		var ajaxBtn=document.getElementById('getAjax');
		// 事件函数
		function doAjaxGet(){
			// ajax操作流程 4步
			// 1.建立一个xhr对象
			var xhr1=new XMLHttpRequest();
			// 2.打开一个服务器链接
			// 请求方式:get post
			xhr1.open('get','a.php?age=18');
			// 3.发送请求(get不需要发送数据,post需要)
			xhr1.send(null);
			// 4.检测数据是否发送成功,检测服务器是否响应成功
			xhr1.onreadystatechange=function(){
				// 是否发送成功
				if(xhr1.readyState==4){
					// 4表示正常的请求过程成功
					// 是否响应成功
					// alert(xhr1.status);
					if(xhr1.status==200){
						// 使用服务器给我们的数据
						console.log(xhr1.responseText);
					}
				}					
			}
		}
		// 添加事件
		ajaxBtn.addEventListener('click',doAjaxGet,false);
		
		// 简单ajax流程_post请求————————————————————————————————
		// 获取按钮
		var ajaxBtn=document.getElementById('getAjax');
		// 事件函数
		function doAjaxPost(){
			// ajax操作流程 4步
			// 1.建立一个xhr对象
			var xhr2=new XMLHttpRequest();
			// 2.打开一个服务器链接
			// 请求方式:get post
			xhr2.open('post','b.php');
			// 设置post专用的头信息
			xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			// 3.发送请求(get不需要发送数据,post需要)
			xhr2.send('age=99&sex=man&hobby=sing');
			// 4.检测数据是否发送成功,检测服务器是否响应成功
			xhr2.onreadystatechange=function(){
				// 是否发送成功
				if(xhr2.readyState==4){  // 4表示正常的请求过程成功				
					// 是否响应成功
					// alert(xhr2.status);
					if(xhr2.status==200){
						// 使用服务器给我们的数据
						console.log(xhr2.responseText);
					}
				}					
			}
		}
		// 添加事件
		ajaxBtn.addEventListener('click',doAjaxPost,false);
	script>
body>

a.php


	echo $_GET['age'];
	echo '啦啦啦';
?>

b.php


	echo '年龄:'.$_POST['age'];
	echo '性别:'.$_POST['sex'];
	echo '爱好:'.$_POST['hobby'];
	echo '嘿嘿嘿';
?>

web前端学习笔记28-Ajax——用户体验提升者_第3张图片

你可能感兴趣的:(web前端学习,ajax,javascript,html5,html)