`
haking
  • 浏览: 264168 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

AJAX W3CSchool 学习笔记

    博客分类:
  • Web
 
阅读更多

1. AJAX是什么?

AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),

基于 JavaScript 和 HTTP 请求(HTTP requests)。

AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法,

是一种在 2005 年由 Google 推广开来的编程模式, 用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。

 

2. 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

 

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

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");
  }

 

3. 向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","test1.txt", true); // GET 或 POST, url, true(异步)或 false(同步)
xmlhttp.send(); // 将请求发送到服务器, send()在POST时,可以带String参数,参数值为表单数据

 

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

a. 无法使用缓存文件(更新服务器上的文件或数据库)

b. 向服务器发送大量数据(POST 没有数据量限制)

c. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

 

POST方式带参数的例子:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

 

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

 

onreadystatechange     存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState,存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中

4: 请求已完成,且响应已就绪
status    
200: "OK"
404: 未找到页面

 

服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText     获得字符串形式的响应数据。
responseXML     获得 XML 形式的响应数据。

 

 

参考文档:

http://www.w3school.com.cn/ajax/index.asp

 

分享到:
评论

相关推荐

    vue w3cschool学习笔记

    在“vue w3cschool学习笔记”中,我们可以看到多个关键知识点,包括Vue的安装与运行、实例化、模板语法、指令、用户输入、过滤器、条件判断、循环语句、计算属性以及事件处理等。 1. **安装与运行**: 使用`cnpm ...

    W3CSchool(全套教程最新版_2012)

    W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套...

    常用web开发工具 w3cschool菜鸟教程20141021

    常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程...

    W3Cschool官方手册离线版

    w3cschool官方手册离线版,最新中文版 w3cschool官方手册离线版,亲测可用

    W3CSchool.chm

    通过W3CSchool.chm离线文档,开发者不仅可以学习到上述基础技术,还能了解到其他如AJAX、jQuery、JSON、SVG等前沿技术。此外,文档中还包含了许多实例和练习,帮助读者巩固理论知识,提升实际操作能力。 总之,W3...

    w3cschool离线版教程chm版本2017年11月5号更新

    w3cschool离线版教程chm版本2017年11月5号更新。包含w3cschool的全部内容

    中文完整W3CSchool.chm

    《中文完整W3CSchool.chm》是一款专为中文用户设计的在线学习资源库,它以CHM(Compiled Help Manual)格式提供,包含了丰富的Web开发和技术教程。CHM是一种由微软开发的帮助文件格式,用于存储HTML文档和其他相关...

    w3cschool中文教程.chm.zip

    《w3cschool中文教程》是一个综合性的在线学习资源,主要涵盖了互联网开发的多个关键领域。这个压缩包包含了HTML、CSS、XML、JavaScript (JS)、JSON、PHP、SQL、ASP、ADO、VB、Web技术、AJAX以及jQuery等多个主题的...

    W3Cschool 破解版离线教程

    破解版,W3Cschool 破解版离线教程,方便查找各种标签,是编程的好助手

    仿w3cschool整站源码 v1.5

    【标题】"仿w3cschool整站源码 v1.5"是一个基于PHP开发的网站源代码,其目标是模仿知名的在线学习平台W3CSchool的网站布局、功能和用户体验。这个源码版本为1.5,意味着它是对早期版本的改进,可能包括修复已知的...

    w3cschool菜鸟教程离线版( 完整 )

    《w3cschool菜鸟教程离线版(完整)》是一个包含丰富IT学习资源的压缩包,其中主要聚焦在Web开发的基础技术,如JavaScript和HTML。这个离线版本为那些无法联网或者希望随时随地学习的用户提供了一个方便的学习平台。...

    w3cschool学习资料

    【w3cschool学习资料】 w3cschool是全球知名的在线学习平台,专注于提供Web开发相关的教育资源,包括HTML、CSS、JavaScript、PHP、SQL等多种技术。这个“w3cschool学习资料”压缩包包含了丰富的教程和实践案例,是...

    W3CSchool全套教程

    W3CSchool的JavaScript教程涵盖了变量、数据类型、运算符、控制流、函数、对象、DOM操作等核心概念,还涉及到AJAX、jQuery库等实用技术。 4. Web API与框架:随着Web开发的发展,JavaScript库和框架的使用越来越...

    W3CSchool文档中文版

    《W3CSchool文档中文版》是一份非常全面的在线学习资源,专为中文用户设计,旨在帮助初学者和有经验的开发者深入理解和掌握网页制作技术。这份文档覆盖了从HTML、CSS到JavaScript等关键领域的知识,是互联网开发者的...

    w3cschool菜鸟教程(w3cschool.cc).7z

    《w3cschool菜鸟教程(w3cschool.cc)》是一个知名的在线学习平台,专注于提供丰富的Web技术教程,包括HTML、CSS、JavaScript、PHP、SQL等。这个压缩包文件包含了该平台的部分教学资源,主要是一个名为“w3cschool...

    w3cschool.cc

    标题 "w3cschool.cc" 暗示了这是一个与 web 开发教育平台 w3cschool.cc 相关的知识点。...通过 w3cschool.cc 学习这些技能,初学者可以逐步掌握 web 开发的基本概念和技术,而高级开发者则能进一步提升自己的专业能力。

    W3CSchool帮助文档

    W3CSchool是全球知名的Web技术学习平台,以其详尽的教程、实例和互动式练习而闻名。这份帮助文档集合了该网站的精华内容,便于离线查阅和学习。 HTML(HyperText Markup Language)是构建网页的基础语言,用于定义...

    w3cschool电子版下载

    W3CSchool,作为全球知名的在线学习平台,为无数WEB开发者提供了丰富的学习资源。其电子版的下载,无疑为那些热衷于WEB开发的人们带来了极大的便利。这份资料包含全面的教程、详尽的参考手册以及海量的代码库,覆盖...

    w3cschool离线版客户端工具下载

    W3Cschool离线版PC客户端是www.w3cschool.cn网站官方推出的正版客户端。我们是一个专业的编程入门学习及技术文档查询应用,提供包括HTML,CSS,...W3Cschool离线版PC客户端是为了满足用户能够离线学习编程知识。

    W3CSchool教程.chm

    W3CSchool的JavaScript教程将涵盖变量、数据类型、运算符、控制流语句、函数等基础知识,以及DOM操作、AJAX异步通信、事件处理等高级话题。此外,还可能涉及ES6及以上的最新特性,如箭头函数、模板字符串、Promise和...

Global site tag (gtag.js) - Google Analytics