基本概念:

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)学习笔记的更多相关文章

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

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  2. 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。

    指一种创建交互式网页应用的网页开发技术. AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词. 不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Stan ...

  3. ajax(Asynchronous JavaScript and XML) 异步js或者xml

    1.XMLHttpRequest 对象:向服务器发送局部的请求,异步获取执行 a.浏览器支持 b.语法: xmlhttp==new XMLHttpRequest(); xmlhttp.open(&qu ...

  4. AJAX(Asynchronous JavaScript And XML)

    AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...

  5. XML学习笔记

    XML学习笔记 第一部分:XML简介 我们经常可以听到XML.HTML.XHTML这些语言,后两者比较清楚,一直不是很明白XML是什么,这里做一个总结. XML(eXtensible Markup L ...

  6. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  7. delphi操作xml学习笔记 之一 入门必读

    Delphi 对XML的支持---TXMLDocument类       Delphi7 支持对XML文档的操作,可以通过TXMLDocument类来实现对XML文档的读写.可以利用TXMLDocum ...

  8. Ajax技术实战操练课堂学习笔记

    ajax是什么 ? ajax(asynchronouse javascript and xml) 异步的javascript 和 xml 是7种技术的综合,它包含了七个技术( javascript x ...

  9. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  10. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

随机推荐

  1. java 输出流 outputstream

    一:输入和输出概念 输入流(inputstream):对于java程序来说,从程序写入文件叫做输出. 输出流(outputstream):对于java程序来说,从文件读取数据,到java程序叫做输入. ...

  2. 965. Univalued Binary Tree

    题目来源: https://leetcode.com/problems/univalued-binary-tree/submissions/ 自我感觉难度/真实难度: 题意: 分析: 自己的代码: c ...

  3. 让自己的项目支持 Carthage

    据说 cocoaPods 升级到1.0之后变得使用起来不太方便了,好吧,这段时间公司事儿比较多而且是自己写的sdk就不怎么写demo了,cocoaPods也没用几次…… 前两天朋友说要转战 Carth ...

  4. 【题解】洛谷P2577 [ZJOI2005] 午餐(DP+贪心)

    次元传送门:洛谷P2577 思路 首先贪心是必须的 我们能感性地理解出吃饭慢的必须先吃饭(结合一下生活) 因此我们可以先按吃饭时间从大到小排序 然后就能自然地想到用f[i][j][k]表示前i个人在第 ...

  5. HDU 1316 (斐波那契数列,大数相加,大数比较大小)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1316 Recall the definition of the Fibonacci numbers: ...

  6. iOS蓝牙APP常驻后台

    iOS蓝牙类APP常驻后台的实现方法,经过在苹果开发者论坛询问,以及查看苹果开发者文档,最后得出正确的方法为: 1.设置plist,蓝牙权限 2.到target-capabilities-backgr ...

  7. Ubuntu安装ss

    安装环境:ubuntu 16.04 (推荐使用此版本-2019年3月) 本文假设读者已经拥有一台vps. 安装ss 首先通过终端以root身份登录vps $ ssh root@[IP Address] ...

  8. HTTP协议图

  9. 仙人掌&圆方树

    仙人掌&圆方树 Tags:图论 [x] [luogu4320]道路相遇 https://www.luogu.org/problemnew/show/P4320 [ ] [SDOI2018]战略 ...

  10. [Windows]_[中级]_[崩溃报告的中级解决方案]

    场景 1.在Windows上用C/C++开发软件, 经常会出现软件级别的崩溃情况, 如果用户看到这种崩溃报告, 那么一般会认为软件质量不高, 从而不想用. Windows上就会有崩溃报告这种噢给你工具 ...