初识Ajax，基础知识

最新推荐文章于 2019-12-04 12:26:39 发布

Evewyf

最新推荐文章于 2019-12-04 12:26:39 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_45393105/article/details/100742032

版权

初识Ajax，基础知识

1.ajax的诞生

2005 年Jesse James Garrett 发表了一篇文章，

标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，

用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML 的简写。

这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。

2.什么是ajax？

Ajax被认为是(AsynchronousJavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。

3.核心技术—XMLHttpRequest

Ajax 技术核心是XMLHttpRequest 对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR 出现之前，Ajax 式的通信必须借助一些hack 手段来实现，大多数是使用隐藏的框架或内嵌框架。

XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了

流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

虽然Ajax 中的x 代表的是XML，但Ajax 通信和数据格式无关，也就是说这种技术不一定使用XML。

XMLHttpRequest

       IE7+、Firefox、Opera、Chrome 和Safari 都支持原生
   的XHR 对象， 在这些浏览器中创建XHR 对象可以直接实例化
   XMLHttpRequest 即可。
       var xhr = new XMLHttpRequest(); alert(xhr); //XMLHttpRequest

XMLHttpRequest

在使用XHR对象时，线必须调用open（）方法，它接受三个参数：要发送的秦秋类型（get，post），请求的url和表示是否异步。open()方法并不会真正发送请求，而只是启动一个请求以备发送。

通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体

发送的数据。如果不需要则，必须填null。

执行send()方法之后，请求就会发送到服务器上。

var xhr=new XMLHttpRequest();//
xhr.open('get','/web07/ajaxTextServlet?name=jack',true);//open但是并没有真正的提交
xhr.send(null);

当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR 对象的属性。那么一共有四个属性：

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如果响应主题内容类型是“text/xml”或“application/xml”,则返回包含响应数据的XML DOM文档
status	响应的HTTP状态
status Text	HTTP状态的说明

HTTP状态码

HTTP状态码	状态字符串	说明
200	OK	服务器成功返回了页面
400	BadRequest	语法错误导致服务器不识别
401	Unauthorized	请求需要用户认证
404	Not Found	指定的URL在服务器上找不到
500	Internal Server Erro	服务器遇到意外错误，无法完成请求
503	ServiceUnavailable	由于服务器过载或者维护导致无法完成请求

利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：

1， onreadystatechange 事件处理函数

2， open 方法

3，send 方法

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

         该事件处理函数由服务器触发，而不是用户
         在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest
    对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接 操作的一种方式。
         每次 readyState 属性的改变都会触发 readystatechange事件

xhr.onreadystatechange=function(){
	alert(xhr.status);
	if(xhr.status==200){//服务器的响应状态码
		//说明服务器正常响应
		if(xhr.readyState==4){//ajax的状态码
			var d=xhr.responseText;
		ppp.innerHTML=d;
		}
	}

ajax案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="ppp"></p>
<script type="text/javascript">
var xhr=new XMLHttpRequest();//
xhr.open('get','/web07/ajaxTextServlet?name=jack',true);//open但是并没有真正的提交
xhr.send(null);//get方式发送请求，这里需要填入null，post方式发送的时候send（“name”）


} 
</script>
</body>
</html>

Evewyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Ajax，基础知识

初识Ajax，基础知识1.ajax的诞生2005 年Jesse James Garrett 发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML 的简写。这种技术能够想服务器请求额外的数据而无须卸...
复制链接

扫一扫