w3c html5 ajax,Ajax教程学习笔记（W3CSchool）

最新推荐文章于 2021-11-21 18:23:51 发布
最新推荐文章于 2021-11-21 18:23:51 发布
阅读量301 收藏 1
点赞数
文章标签： w3c html5 ajax

第一章： 基础

1.1 是什么？

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

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

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

1.2 简介

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.3 实例

w3c上并没有给出实例……

第二章： Ajax XHR

2.1 XHR 创建对象(AJAX - 创建 XMLHttpRequest 对象

)

XMLHttpRequest 是 AJAX 的基础。

2.1.1 创建 XMLHttpRequest 对象的语法：

variable = new XMLHttpRequest();

2.2.2 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象：

variable = new ActiveXObject("Microsoft.XMLHTTP");

2.2.3 为了应对所有的现代浏览器，包括 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");

}

2.2 XHR 请求(AJAX - 向服务器发送请求)

XMLHttpRequest 对象用于和服务器交换数据。

2.2.2 向服务器发送请求

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

0880117cc44d

方法介绍

2.2.3 POST OR GET？

GET 还是 POST？

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

然而，在以下情况中，请使用 POST 请求：

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

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

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

2.2.4 为了避免得到缓存结果，向url添加一个唯一id

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

xmlhttp.send();

2.2.5 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

0880117cc44d

setRequestHeader方法

** 请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。**

2.3 XHR 响应(AJAX - 服务器响应)

2.3.1 服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

0880117cc44d

属性描述

例子：(获取xml中的带title标签的文字)

Test01.htm

function loadXMLDoc() {

var xmlhttp;

var txt, x, i;

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) {

xmlDoc = xmlhttp.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("title");

for (i = 0; i < x.length; i++) {

txt = txt + x[i].childNodes[0].nodeValue + "
";

}

document.getElementById("myDiv").innerHTML = txt;

}

}

xmlhttp.open("GET", "books.xml", true);

xmlhttp.send();

}

My Book Collection:

获得我的图书收藏列表

books.xml(里面有部分测试代码)

中华手记

一个字，好！

2018-12-12三字经

一个字，好！

2018-12-12

0880117cc44d

2.4 XML readState(AJAX - onreadystatechange 事件)

0880117cc44d

代码：

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

例子：(获取txt里的文字)

Test02Txt.htm

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", "Test01.txt", true);

xmlhttp.send();

}

Let AJAX change this text

通过 AJAX 改变内容

Test01.txt

hello,welcome to my world!

what do you want ?

0880117cc44d

点击结果

第三章 Ajax 高级

3.1 Ajax asp/php

例子：

Test03.asp

function showHint(str) {

var xmlhttp;

if (str.length == 0) {

document.getElementById("txtHint").innerHTML = "";

return;

}

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("txtHint").innerHTML = xmlhttp.responseText;

}

}

xmlhttp.open("GET", "test03.aspx?q=" + str, true);

xmlhttp.send();

}

请在下面的输入框中键入字母(A - Z)：

姓氏：

建议：

test03.asp

//这里是空的

test03.aspx.cs

protected void Page_Load(object sender, EventArgs e)

{

Response.ContentType = "text/plain";

string q = Request["q"];

string [] a = new string[5];

a[0] = "Anna";

a[1] = "Bnna";

a[2] = "cnna";

a[3] = "dnna";

a[4] = "enna";

if (q.Length > 0)

{

for (int i = 0; i < a.Length; i++)

{

if (a[i].Contains(q))protected void Page_Load(object sender, EventArgs e)

{

Response.ContentType = "text/plain";

string q = Request["q"];

string[] a = new string[5];

a[0] = "Anna";

a[1] = "Bnna";

a[2] = "cnna";

a[3] = "dnna";

a[4] = "enna";

for (int i = 0; i < a.Length; i++)

{

if (a[i].Contains(q))

{

Response.Write(a[i] + " ");

break;

}

}

}

0880117cc44d

这里还有好多需要优化的地方，这里只是表示下使用的方式……其实这里把创建.aspx文件改成一般处理程序可能会更好一些……

3.2 Ajax 数据库(AJAX 数据库实例)

例子：

Test04SQL.htm

function showCustomer(str) {

var xmlhttp;

if (str == "") {

document.getElementById("txtHint").innerHTML = "";

return;

}

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("txtHint").innerHTML = xmlhttp.responseText;

}

}

xmlhttp.open("GET", "test04getcustomer.aspx?q=" + str, true);

xmlhttp.send();

}

请选择章节：

请选择

第二章

章节显示处...

test04sql.cs

protected void Page_Load(object sender, EventArgs e)

{

Response.ContentType = "text/plain";

string q = Request["q"];

string sql = "select * from TestEssay";

DataSet ds = DbHelperSQL.Query(sql);

for (int i = 0; i < ds.Tables[0].Rows.Count;i++ )

{

Response.Write(ds.Tables[0].Rows[i]["Content"]);

}

}

0880117cc44d

此处只是随便从数据库读取一些信息出来，只是介绍下操作数据库的方式，此实例并没有什么实际用途。

3.3 AJAX XML 实例

可参照第二章，响应……

第四章： Ajax 实例

Test05Ex.htm

var xmlhttp;

function loadXMLDoc(url) {

xmlhttp = null;

if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc.

xmlhttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) {// code for IE5, IE6

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp != null) {

xmlhttp.onreadystatechange = onResponse;

xmlhttp.open("GET", url, true);

xmlhttp.send(null);

}

else {

alert("Your browser does not support XMLHTTP.");

}

}

function onResponse() {

if (xmlhttp.readyState != 4) return;

if (xmlhttp.status != 200) {

alert("Problem retrieving XML data");

return;

}

txt = "

x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

for (i = 0; i < x.length; i++) {

txt = txt + "

";

xx = x[i].getElementsByTagName("TITLE");

{

try {

txt = txt + "

" + xx[0].firstChild.nodeValue + "";

}

catch (er) {

txt = txt + "

";

}

}

xx = x[i].getElementsByTagName("ARTIST");

{

try {

txt = txt + "

" + xx[0].firstChild.nodeValue + "";

}

catch (er) {

txt = txt + "

";

}

}

txt = txt + "

";

}

txt = txt + "

";

document.getElementById('copy').innerHTML = txt;

}

Get CD info

test05.xml

hhhh

aaa

hhhh

aaa

hhhh

aaa

hhhh

aaa

hhhh

aaa

0880117cc44d

路易·罗莎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax教程 w3school离线版
09-08
jax教程 w3school离线版 AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML
w3c的ajax操作函数,关于ajax的使用方法_例题、ajax的数据处理
weixin_26875051的博客
08-06 245
AJAX 的 关于ajax的使用方法_例题、ajax的数据处理需要注意的是，调用的封装的数据库，和jQuery的保存地址一、注册(1)写文本框来进行用户名的验证 //这个使用来显示提示信息的(2)用jQuery语句写：用户名存在不能使用，用户名可以使用$("#uid").blur(function(){//取用户名var uid = $(this).val();//查数据库，调ajax$.ajax...
AJAX知识总结-W3C
qq_21065779的博客
01-03 187
AJAX 教程   AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
ajax w3c,新W3C标准中 AJAX 跨域实现以及隐患
weixin_33599503的博客
08-05 149
作者：刺标准也很无奈，标准很难做到 Secure By Default。最新的W3C标准里是这么实现HTTP跨域请求的，Cross-Origin Resource Sharing简单来说，就是跨域的目标服务器要返回一系列的Headers，通过这些Headers来控制是否同意跨域。这些Headers有：在 Request 包和 Response 包中都有一些。其中最敏感的就是 Access-Cont...
w3c中文版（html5、css、ajax、asp、js、dhtml）
01-22
about ado ado ajax asp aspnet browsers careers css dhtml dotnetmobile dtd e4x example hosting html html5 htmldom i js media msnet php quality quiz rdf rss schema search semweb site smil soap sql svg tags tcpip tiy vbscript w3c wap web webservices wmlscript wsdl xforms xhtml xlink xml xmldom xpath xquery xsl xslfo 解决CHM打开后提示”地址无效”"已取消到该网页的导航”： （1）在所下载的chm文件上 单击右键-属性-解除锁定-确定 再次打开问题即可解决 （2）二：是因为文件所处的路径名中含有#这样的字符的缘故。<br>因为上次WINDOWS XP2做了UPDATE之后就无法打开chm的帮助文件了....想来想去也无法解决.. <br>今天上来问.. <br>CALLCALL朋友给我提供方法也是无法解决..之后我去了官方查找原因..终于找出问题了!! <br>现在把他分享出来,希望有碰到跟我一样的情况下的朋友可以有所帮助!! <br>症状 <br>安装安全更新 896358 或 890175 后，可能会遇到下列一个或多个症状： • 某些类型的基于 Web 的程序可能无法正常运行。例如，HTML 帮助中的目录可能不再起作用。 <br>• 从远程位置打开 .chm 文件时，某些 HTML 帮助功能可能不起作用。例如，“相关主题”功能可能不起作用。 <br>打开CHM后里面的内容全部不可见...就像我们常见的404错误一样! <br>注意：本文包含以下 Microsoft 知识库文章的补充信息： <br>896358 (http://support.microsoft.com/kb/896358/) MS05-026：HTML 帮助中的漏洞可能允许远程执行代码 <br>890175 (http://support.microsoft.com/kb/890175/) MS05-001：HTML 帮助中的漏洞可能允许代码执行 <br>安装这些安全更新后会出现这些症状是预料之中的。本节为必须对关键业务程序重新启用 HTML 帮助 ActiveX 控件的管理员提供了一些示例。这些替代方法可能会危及计算机，使之更容易遭受上述安全更新所克制的威胁。最安全的做法是不要使用注册表替代方法。如果必须使用替代方法，请尽可能严格地设置注册表值。 <br>因为CHM有存在此上漏洞!!所以更新之后会出现像我那种情况! <br>解决方案: <br>将以下文本粘贴到文本编辑器（如记事本）中。然后用 .reg 文件扩展名保存该文件导入注册表.(注意先备份注册表)。 <br>CODE:[Copy to clipboard]REGEDIT4 <br>[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\HTMLHelp] <br>[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\HTMLHelp\1.x\HHRestrictions] <br>"UrlAllowList"="\\\\productmanuals\\helpfiles;http://www.wingtiptoys.com/help/" <br>另外微软自己的网站上也有类似的说明，网址是http://support.microsoft.com/kb/902225/zh-cn <br>它给的解决方法是引用 <br>为最终用户提供的解决方案 <br>警告：如果提示从网站打开或保存 .chm 文件，则仅在需要此文件且信任提供此文件的网站的情况下进行此操作。 <br>在“文件下载”对话框中，单击“保存”，然后选择要保存此 .chm 文件的位置。然后，使用下面的方法之一： <br>方法 1 <br>1. 双击此 .chm 文件。 <br>2. 在“打开文件安全警告”对话框，单击以清除“打开此文件前始终询问”复选框。 <br>3. 单击“打开”。 <br>方法 2 <br>1. 右键单击该 CHM 文件，然后单击“属性”。 <br>2. 单击“取消阻止”。 <br>3. 双击此 .chm 文件以打开此文件。
HTML5（W3CSchool版）.zip
05-26
这个"HTML5（W3CSchool版）.zip"压缩包很可能包含了该平台关于HTML5的教程内容，方便用户离线学习。 HTML5的核心目标是简化web开发，提高网页在各种设备上的兼容性和可用性。它引入了诸多新特性，如语义化标签、...
w3cschool中文教程.chm.zip
08-13
《w3cschool中文教程》是一个综合性的在线学习资源，主要涵盖了互联网开发的多个关键领域。这个压缩包包含了HTML、CSS、XML、JavaScript (JS)、JSON、PHP、SQL、ASP、ADO、VB、Web技术、AJAX以及jQuery等多个主题的...
W3CSchool+html5中文api
10-11
W3CSchool 在线html学习文档和html中文api，里面包含从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。通过使用在线编辑器，你可以编辑这些例子，并对代码进行实验。
w3cschool菜鸟教程（w3cschool.cc）.7z
09-23
《w3cschool菜鸟教程（w3cschool.cc）》是一个知名的在线学习平台，专注于提供丰富的Web技术教程，包括HTML、CSS、JavaScript、PHP、SQL等。这个压缩包文件包含了该平台的部分教学资源，主要是一个名为“w3cschool...
w3cschool离线教程
11-04
【标题】"w3cschool离线教程"涵盖了丰富的IT技术知识，旨在为学习者提供一个全面且便捷的在线学习资源。W3Cschool作为知名的网络教育平台，以其易懂的教程和广泛的涵盖范围深受开发者喜爱。这个离线教程包含了各种...
W3school AJAX教程
03-16
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
W3School Ajax教程
07-03
W3School Ajax教程 Ajax 教程 整理的W3School Ajax教程
AJAX基础学习(5)——XMLHttpRequest 对象
JavaCrazyer的ItEye(codewu.com)技术博客
12-27 115
  AJAX - 更多有关 XMLHttpRequest 对象的知识   在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。   onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：   ...
ajax 初识 w3cschool
09-11 693
ajax.html check.jsp
Ajax教程学习笔记（W3CSchool）
张中华的博客
03-27 129
第一章： 基础 1.1 是什么？ AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。   AJAX 不是新的编程语言，而是一种使用现有标准的新方法。   AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 1.2 简介 AJAX = 异步 JavaScr...
ajax所学所用总结（w3c的ajax教程学习，jquery1.7中文手册学习——ajax请求）
weixin_30443731的博客
02-25 115
第一次接触ajax是w3c的ajax教程。那是2014年暑假的事情了，当时是为了做一个页面局部数据刷新用的。 下面引用一个它们的例子简单的总结下~（源码出自w3c） <html><!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlh...
AJAX - (转w3cschool)
我的三千烦恼丝
07-20 921
AJAX - 在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystat
对 onreadystatechange 属性的理解
m0_46262108的博客
11-21 545
在编写 Ajax 方法的时候，我们经常会写上类似于这样的代码： Ajax 代码： var xmlHttp; //创建一个XmlHttpRequeset对象 function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp
AJAX W3CSchool 学习笔记
Haking的博客
11-12 153
1. AJAX是什么？ AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）， 基于 JavaScript 和 HTTP 请求（HTTP requests）。 AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法， 是一种在 2005 年由 Google 推广开来的编程模式， 用于创建快速动态网页的技术。 通过在后台...
学习前端，使用菜鸟教程还是w3cschool好？
最新发布
05-19
1. 菜鸟教程与w3cschool都是非常流行的在线学习资源，它们都提供了广泛的前端教程和案例。 2. 菜鸟教程的优点是它的文档非常全面且易于理解，适合初学者。而w3cschool则更加注重实践操作，它的在线练习环境可以让你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值