AJAX（Asynchronous JavaScript and XML）学习笔记
基本概念：
1.AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。
2.AJAX最大的优点是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，用于创建快速动态网页（传统网页如果需要更新内容，必须重新加载整个页面）。
3.AJAX不需要任何浏览器插件，只需要允许JavaScript在浏览器上运行。
4.AJAX的应用实例：新浪微博，谷歌地图，谷歌搜索建议
创建XMLHttpRequest对象：
重点：
1.XMLHttpRequest是AJAX的基础。
2.创建XMLHttpRequest对象的语法：
var xmlhttp;
//为了应对所有的现代浏览器，包括 IE5 和 IE6，检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
if (window.XMLHttpRequest)
{
//IE7+, Firefox, Chrome, Opera, Safari浏览器
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求：
重点：
1.XMLHttpRequest对象用于和服务器交换数据
2.语法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
3.与POST相比，GET更快更简单，大部分情况适用，只有三种情况要使用POST：
无法使用缓存文件（更新服务器上的文件或者数据库）
向服务器发送大量数据（POST没有数据量的限制）
发送包含未知字符的用户输入时，POST更稳定可靠
4.如果使用POST请求，需要使用setRequestHeader()来添加HTTP头，然后在send()方法中规定想要发送的数据。
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
5.open()方法中的URL是服务器上文件的地址，该文件可以是任何类型，比如.txt和.xml，或者服务器脚本文件，.asp/.php，只要在传回响应之前能够在服务器上执行任务。
6.Async一般设置为true，这样JavaScript可以在等待服务器响应时执行其他脚本，并且在响应就绪后对响应进行处理。此时要规定响应处于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();
对于一些小型请求，可以设置为false，此时不用编写onreadystatechange函数，把代码放到send()函数后面就行：
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
服务器响应：
重点：
1.如果需要获得响应，需要使用 XMLHttpRequest 对象的两个属性，responseText或者responseXML：
2.如果来自服务器的响应不是XML，就使用responseText：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
3.如果是XML，需要对XML对象进行解析：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
onreadystatechange事件：
重点：
1.XMLHttpRequest对象的三个属性：
当请求被发送到服务器时，我们会基于服务器的响应执行响应的任务。
每当readyState改变时，会触发onreadystatechange事件。
readyState会储存XMLHttpRequest的状态信息。
在上述条件中，onreadystatechange事件会被触发5次。
2.使用回调函数：
回调函数是一种以参数形式传递给另一个函数的函数。
如果网站上有多个AJAX任务，应为XMLHttpRequest对象编写回调函数，在每次使用AJAX时调用。
应包含URL以及每次发生onreadystatechange时执行的任务：
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
} function myFunction()
{
//loadXMLDoc()函数储存XML内容
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
ASP/PHP实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// 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","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body> <h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> </body>
</html>
1.如果表单中没有输入str.length == 0，则清空txtHint占位符的内容，并退出。
2.如果表单中有内容，onkeyup时间会触发showHint函数，创建XMLHttpRequest对象，当服务器响应就绪时执行函数，最后把请求发送到服务器上的文件。
AJAX（Asynchronous JavaScript and XML）学习笔记的更多相关文章
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...
- 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术. AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词. 不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Stan ...
- ajax(Asynchronous JavaScript and XML) 异步js或者xml
1.XMLHttpRequest 对象:向服务器发送局部的请求,异步获取执行 a.浏览器支持 b.语法: xmlhttp==new XMLHttpRequest(); xmlhttp.open(&qu ...
- AJAX（Asynchronous JavaScript And XML）
AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...
- XML学习笔记
XML学习笔记 第一部分:XML简介 我们经常可以听到XML.HTML.XHTML这些语言,后两者比较清楚,一直不是很明白XML是什么,这里做一个总结. XML(eXtensible Markup L ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- delphi操作xml学习笔记 之一 入门必读
Delphi 对XML的支持---TXMLDocument类 Delphi7 支持对XML文档的操作,可以通过TXMLDocument类来实现对XML文档的读写.可以利用TXMLDocum ...
- Ajax技术实战操练课堂学习笔记
ajax是什么 ? ajax(asynchronouse javascript and xml) 异步的javascript 和 xml 是7种技术的综合,它包含了七个技术( javascript x ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
随机推荐
- TCL函数“参数自动补全” 与 “help 信息显示”
tcl 函数参数自动补全和 help 信息显示 在EDA tool 中使用命令时,命令的参数可以通过 tab 键自动补全,而且可以使用 -help 显示帮助信息,使用起来很方便: 那么我们自己编写的 ...
- 【取色】ColorMania
取色剂软件
- Java-数组队列
Java-数组队列 1.为何要创建一个数组队列? 数组的优点和缺点: 优点:访问速度是所有数据结构中最快的一种. 缺点:大小固定,如果要存储的数据个数不确定的时候? 数组空间不够,导致越界异 ...
- ruby的循环使用及区别（for、each等）
ruby的循环有以下几种: times方法 for语句 while语句 until语句(与while相反) each方法(与for极度相似,在ruby内部,for语句是用each实现的) loop方法 ...
- 目标反射回波检测算法及其FPGA实现 之二：互相关/卷积/FIR电路的实现
目标反射回波检测算法及其FPGA实现之二: 互相关/卷积/FIR电路的实现 前段时间,接触了一个声呐目标反射回波检测的项目.声呐接收机要实现的核心功能是在含有大量噪声的反射回波中,识别出发射机发出的激 ...
- 可变多隐层神经网络的python实现
说明:这是我对网上代码的改写版本,目的是使它跟前一篇提到的使用方法尽量一致,用起来更直观些. 此神经网络有两个特点: 1.灵活性 非常灵活,隐藏层的数目是可以设置的,隐藏层的激活函数也是可以设置的 2 ...
- 【转载】COM 组件设计与应用（十七）——持续性
原文:http://vckbase.com/index.php/wv/1264.html 一.前言 我们写程序,经常需要实现这样的需求: 例一.程序运行产生一个窗口,用户关闭的时候需要记录窗口的位置, ...
- 6-[多线程]-互斥锁、GIL、死锁、递归锁、信号量
1.互斥锁(排他锁) (1)不加锁的情况下 并发控制问题:多个事务并发执行,可能产生操作冲突,出现下面的3种情况 丢失修改错误 不能重复读错误 读脏数据错误 # mutex from threadin ...
- Gitlab+Jenkins学习之路（五）之git merge和git rebase的区别
命令行测试 [root@linux-node1 ~]# mkdir testing [root@linux-node1 ~]# [root@linux-node1 ~]# cd testing/ [r ...
- linux日志分割、去重、统计
一.实例 单条日志模板: 2018-11-08 02:17:22 [Iceberg]process params:IcebergOfferServiceImpl.Params(pk=BF06NA2YE ...