Ajax入门实例----HelloWorld附源码详细注释

前端之家收集整理的这篇文章主要介绍了Ajax入门实例----HelloWorld附源码详细注释前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax是什么?

Asynchronous Javascript And Xml.异步的Javascript和Xml
Ajax是一种在网络应用中实现异步通讯数据交换的技术。
Ajax并没有新的技术,只是老技术的整合包括Javascript,XHTML,CSS,XML,DOM,XSLT和XMLHttpRequest等,使其实现更多的功能

Ajax能干什么?

1.无更新刷新页面
2.按需获取数据,减轻服务器负担。
3. 可以实现富客户端。
4. 基于标准和广泛使用的技术。
5. 进一步实现页面和逻辑分离。
6. 使用户获得连续的、动态的体验

Ajax的使用中关键是XMLHttpRequest。

Ajax之创建HelloWorld步骤:

1. 初始化XMLHttpRequest对象:
用javascript标签包围。
IE是new ActiveXObject(*);
Firefox是new XMLHttpRequest();

[javascript] view plain copy
  1. varreq=null;
  2. //1.初始化XMLHttpRequest对象
  3. req=newActiveXObject("Microsoft.XMLHTTP");//IE下的.

2. XMLHttpRequest对象属性
各个属性要知道。


3. XMLHttpRequest对象的方法

4. 指定响应处理函数
就是指定对象的onreadystatechange属性

copy

    req.onreadystatechange=myDeal;//指定回调方法(Ajax执行完后调用方法)
  1. //调用完服务端后执行的回调方法.实现无刷新更新页面
  2. functionmyDeal()
  3. {
  4. if(req.readyState==4)
  5. //1.接受服务端返回的数据
  6. varret=req.responseText;//返回数据类型是文本
  7. //2.处理(这部分以下内容就与Ajax无关了)
  8. document.all("myDiv").innerHTML=ret;//将服务器返回的结构添加到网页
  9. }
  10. }

5. 发出Http请求:
调用对象的open方法
调用send方法

copy

    req.open("GET","server.jsp?id="+id+"&name="+name,"false");//不传大文档的话,用GET就够了,不需要POST.
  1. req.send(null);

6. 处理服务器返回的信息:
根据readyState的值来获取信息。

copy

    //调用完服务端后执行的回调方法.实现无刷新更新页面
  1. functionmyDeal()
  2. {
  3. if(req.readyState==4)
  4. //1.接受服务端返回的数据
  5. //返回数据类型是文本
  6. //2.处理(这部分以下内容就与Ajax无关了)
  7. document.all("myDiv").innerHTML=ret;//将服务器返回的结构添加到网页
  8. }
  9. }

源码下载:http://download.csdn.net/detail/xn4545945/4511692

( 源码请在IE下运行)

原文链接:https://www.f2er.com/ajax/162107.html

猜你在找的Ajax相关文章