ajax（1）---ajax概述

最新推荐文章于 2022-08-10 21:34:44 发布

猿累人生

最新推荐文章于 2022-08-10 21:34:44 发布

阅读量438

点赞数

本文链接：https://blog.csdn.net/sinat_23490433/article/details/78787296

版权

1、什么是ajax?

asynchronous Javascript and XML，即异步的JavaScript和XML

ajax是一种页面无刷新的技术，也称之为局部刷新技术

2、ajax的优点和缺点？

优点：1）、在不重新加载整个页面的情况下,就可以与服务器交换数据并更新网页的内容

2）、将一些后端工作转移到前端，减轻服务器的压力

3）、支持异步通信，即无需等待请求执行完即可进行下一步操作

缺点：1）、ajax干掉了back和history功能，即对浏览器机制的破坏

2）、对搜索引擎支持较弱

3）、破坏程序的异常处理机制

4）、ajax给用户带来良好的体验的同时，也带来新的安全威胁。即ajax技术如同对企业数据建立了一个直接通到

这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑

3、ajax工作原理

相当于在客户端和服务器端之间加了一个抽象层(ajax引擎)

使得用户请求和服务器响应异步化，并不是所有的请求都提交给服务器

像一些数据验证和数据处理都交给ajax引擎来完成，只有确认需要向服务器读取更新数据时才用ajax引擎向服务器提交请求。

4、ajax和传统的网页相比

ajax可以使网页实现异步更新,意味着不重新加载整个网页的情况下,对网页的某部分进行更新

传统的网页：如果需要更新内容,必须重新加载整个网页页面

5、ajax的核心：XMLHttpRequest对象

1）、ajax的核心只有JavaScript、XMLHttpRequest和DOM

传统的交互方式：用户触发一个HTTP请求到服务器，服务器对其进行处理后再返还一个新的HTML页面到客户端。

每当服务器处理客户端提交的请求时，客户都只能空闲等待，哪怕是一次很小的交互。都要返回一个完整的HTML页

这样浪费了大量的用户等待时间。

2）、XMLHttpRequest：用于在后台与服务器进行数据交换，创建XMLHttpRequest对象如下：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

6、向服务器发送请求

如果需要将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法

语法：xmlhttp.open("请求方式"，"请求url","是否异步");

xmlhttp.send();

如：xmlhttp.open("get","ajax.txt",true);

xmlhttp.send();

1)、请求方式分为：get请求和post请求

get：更简单更快速

向服务器发送数据时,有数据量大小限制，不能大于2kb

安全性较低

post：没有数据量限制,一般默认为不受限制

安全性较高

2）、异步的同步区别：

当async=false时,可以不写onreadystatechange函数，只需要将代码写在send语句后面即可。‘如下：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

当async=true时,规定在响应处于onreadystatechange事件中的就绪状态时执行函数

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

7、XMLHttpRequest对象的三个重要属性

1）、onreadystatechange：存储函数，每当readyState属性改变时,就会调用该函数

2）、readyState：存储XMLHttpRequest的状态值

0：表示请求未初始化

1：服务器连接

2：请求已接收

3：请求处理中

4：请求已完成,且响应已就绪

3）、status： 200----服务器响应正常

400---无法找到请求的资源

404---需要访问的资源不存在

304---该资源在上次请求之后没有任何修改(通常用于浏览器的缓存机制)

500---服务器内部错误

8、ajax入门示例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>ajax测试1</title>
  <script type="text/javascript">
	function ajaxChange(){
		//1.创建一个xmlhttp;
		var xmlhttp;
		//判断浏览器类型,不同浏览器创建xmlhttp的方法不一样
		if(window.XMLHttpRequest){
			xmlhttp=new XMLHttpRequest();  //chrome、firefox、opera、safari、IE7
		}else{
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE6、IE5
		}
		//当readyState改变时会触发onreadystateChange事件
		xmlhttp.onreadystatechange=function(){
			//readyState为xmlHttpRequest的状态,0：请求未初始化,1:服务器连接已建立
			//2:请求已接收 3：请求处理中 4：请求已完成,且响应已就绪
			//status为服务器状态码,200表示响应正常
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				//responseText用户获取服务器的响应,以字符串的形式响应数据
				document.getElementById("div1").innerHTML=xmlhttp.responseText;
			}
		}
		//用于向服务器发送请求
		//get为请求方式
		//ajax_info.txt为url地址
		//true为异步
		xmlhttp.open("GET","ajax_info.txt",true);
		xmlhttp.send();
	}
  </script>
 </head>
 <body>
	<div id="div1">这是一个div,点击下面的按钮会通过ajax修改其内容</div>
	<button οnclick="ajaxChange()">修改内容</button>
 </body>
</html>

猿累人生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax（1）---ajax概述

1、什么是ajax?asynchronous Javascript and XML，即异步的JavaScript和XMLajax是一种页面无刷新的技术，也称之为局部刷新技术2、ajax的优点和缺点？优点：1）、在不重新加载整个页面的情况下,就可以与服务器交换数据并更新网页的内容 2）、将一些后端工作转移到前端，减轻服务器的压力 3）、支持异步通信，即无需等待请
复制链接

扫一扫