什么是Ajax与Ajax原生的实现方式

最新推荐文章于 2022-04-20 11:04:55 发布

weixin_34290096

最新推荐文章于 2022-04-20 11:04:55 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/xq-943746/p/10981429.html

版权

一、什么是Ajax？

　　Aiax：异步的Javascript和XML。

作用：用于完成局部刷新

XML是用于数据传输，现在开始被JSON所替代。

function hello(){
		//1.拿到一个Ajax对象
		var xhr = new XMLHttpRequest();
		//2.open方法:创建一个新的http请求，并指定此请求的方法、URL以及验证信息
		//  准备请求的信息(方式,地址,...)
		/**
			open(bstrMethod, bstrUrl, varAsync)
				bstrMethod:准备请求的方式(GET/POST)
				bstrUrl:准备请求的地址(路径)
				varAsync:是否异步(true就是异步【默认】 ，false就是同步)
		*/
		xhr.open("GET","/hello");
		//3.发送相当的请求
		xhr.send();
	}

1.1、交互方式问题

　　传统的交互方式每次都必须返回整个页面，宽带，响应速度都有影响的，

　　Ajax的交互方式是从

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest（及Ajax对象）对象发送请求到服务器，服务器接收请求并处理完毕后只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容，程序员需要手动(javascript)的把内容更新到页面中，所有Ajax交互的好处是只是部分数据的更新，就成功和服务器进行了交互，提高用户的体验。

1.2、使用场景

　　需要刷新的页面，如（浏览器地图搜素、自动提示、用户重复检查、购物车、用户登录等.....）都需要用到Ajax交互。

1.3、Ajax的特点

　　通过Ajax与服务器进行数据交换，Ajax可以使网页实现局部更新，意味着可以在不重新加载整个页面的情况下，对网页的某个部分进行更新　

1.4、Ajax核心

　　Ajax的核心是JavaScript对象XMLHttpRequest。简单的说　XMLHttpRequest可以让你使用JavaScript向服务器进行请求并处理响应。

1.5、同步与异步的区别

　　同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事

　　异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

二、Ajax原生的实现方式

　　xhr = new XMLHttpRequest() : 通过new它可以创建一个ajax对象【兼容IE需要创建ActiveXObject】

2.1、方法(函数)
　　xhr.open(methodType,methodUrl,isSys) -> 准备请求的方式与路径
　　methodType:请求的方式(GET/POST)
　　methodUrl:请求的路径
　　isSys:是否异步(默认为true)
　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　设置请求头的一个类型，如果是POST请求，一定要加这一句，才可以把数据传到后台
　　位置:open之后，send之前
　　xhr.send(varBody) -> 发送请求
　　varBody:POST请求传参(key=value&key=value&...)
2.2、属性
xhr.status -> 请求状态(200代表成功)
xhr.readyState -> 响应状态(4代表响应完成)
xhr.responseText -> 获取返回的数据(字符串)

　　/**
　　从Ajax对象（xhr）创建开始，它的所有操作都被监听
　　xhr本身是有一个状态的概念，这个状态:readyState
　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
　　1 (初始化) 对象已建立，尚未调用send方法
　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
　　4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
　　*/

function getTime(){
		//1.获取ajax对象
		var xhr = new XMLHttpRequest();
		//2.准备请求(方式,路径)
		xhr.open("get","/gettime");
		//3.监听ajax的状态
		xhr.onreadystatechange = function(){
			//4.如果请求状态为200,响应状态为4
			if(xhr.status==200 && xhr.readyState==4){
				//5.获取相应的值
				var result = xhr.responseText;
				//放到相应的位置
				document.getElementById("time").innerHTML = result;
			}
		}
		//6.发送请求
		xhr.send();
	}

2.3、事件
xhr.onreadystatechange =function(){} -> 监听readyState状态的变化

三、注意点

　　使用Ajax请求，后台不进行跳转，只做数据的传输

返回的值都是字符串，需要自己做相当的判断与转换

四、JSON:JS的对象对象/字符串

json传输数据比XML更加方便,简单,精简
var jsonStr = {}/[];
如果把一个json字符串转成json对象呢？
eval("("+jsonStr+")") -> 前后加括号
JSON.parse(jsonStr) -> 必需是标准的json(key必需有双引号)

function login(){
		//1.获取到用户名与密码
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		//2.创建ajax对象
		var xhr = new XMLHttpRequest();
		//3.准备请求的方式与路径 /login?username=xxx&password=xx
		//  get请求在路径中传参，POST请求在send中传参
		xhr.open("post","/login");
		//  如果是post请求，必需设计请求头的类型，后台才可以拿到相应的数据
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//监听相当的事件
		xhr.onreadystatechange = function(){
			if(xhr.status==200 && xhr.readyState==4){
				//返回的  ”true" 与 "false"
				// responseText拿到的都是字符串
				var result = xhr.responseText;
				if(result=="true"){
					//alert("登录成功了!");
					window.location.href="https://www.baidu.com/";
				}else{
					//alert("登录失败了！");
					document.getElementById("errorSpan").innerHTML ="用户名或者密码错误！";
				}
			}
		}
		//4.发送请求(send里面加上发送的数据)
		xhr.send("username="+username+"&password="+password);
	}
</script>

</head>
<body>

<span id="errorSpan"></span>
<form action="/login" method="post">
	用户名：<input type="text" name="username" id="username" /> <br />
	密码<input type="text" name="password" id="password" /><br />
	<input type="button" value="ajax提交" οnclick="login()" />
	<input type="submit" value="直接提交"  />
</form>

转载于:https://www.cnblogs.com/xq-943746/p/10981429.html

weixin_34290096

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是Ajax与Ajax原生的实现方式

一、什么是Ajax？　　Aiax：异步的Javascript和XML。作用：用于完成局部刷新XML是用于数据传输，现在开始被JSON所替代。function hello(){ //1.拿到一个Ajax对象 var xhr = new XMLHttpRequest(); //2.open方法:创建一个新的http请求，并指定此请求的方法、URL以及验证信息 ...
复制链接

扫一扫