Ajax学习笔记

最新推荐文章于 2022-11-25 21:51:29 发布

A_1023

最新推荐文章于 2022-11-25 21:51:29 发布

阅读量602

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/no_then/article/details/7739368

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、Ajax技术背景、意义

微软在97年推出了Ajax核心技术，在99年发布的IE5开始支持XMLHttpRequst对象，微软发明了这项技术后，并没有对其进行推广和发展。Ajax技术的流行得益于Google的推广，目前Goolge的Ajax技术远远领先于微软。

Ajax技术的发展符合当今软件开发和互联网的的发展趋势。如今越来越多的软件开发是基于B/S模式，互联网正在发挥其优势，但是电脑通过互联网从服务器下载数据问题逐渐成为主要问题，Ajax技术的出现很好的弥补了这个缺点。从本质上看，Ajax技术并没有提高电脑从服务器下载数据的速度，它只是服务器和客户端的一个缓冲器，在用户体验角度上，是用户感觉速度快了。

2、Ajax名字全称

ajax 的全称是Asynchronous JavaScript and XML，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

3、Ajax原理以及XMLHttpRequst对象

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="loadXMLDoc()">Change Content</button>

</body>
</html>

代码来源： http://w3schools.com/ajax/tryit.asp?filename=tryajax_first

1.创建XMLHttpRequest

2.设置回调函数

3.初始化XMLHttpRequest组建并发送请求

4. 服务器返回响应信息

5. 解析服务器返回的信息,更新用户界面

详细调用过程如下