ajax：Asynchronous JavaScript And XML，异步的js与XML。ajax并不是一种新的编程语言，而是一种使用现有标准的新方法。ajax能够在不重载整个网页的情况下与服务器交换数据，从而实现部分网页的更新。在搜索引擎搜索框输入字符就给出匹配的选项，就使用了ajax技术。
1.XMLHttpRequest对象:
    所有现代浏览器都支持XMLHttpRequest，ie浏览器的更早版本ie5、ie6支持ActiveXObject，用于在后台与服务器交换数据。

    //创建XMLHttpRequest对象

    var xmlhttp;

    if(window.XMLHttpRequest){

        xmlhttp=new XMLHttpRequest();

    }else{

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

    }

    //向服务器发送数据

    xmlhttp.open("GET","test.asp",true);

    xmlhttp.send();

2.GET与POST:

　　与post请求相比，get显然要简单快捷多了，并使用于大多数情况下，但在下面这些情况下，请使用post请求：

　　2.1无法使用缓存文件（更新服务器上的文件或数据库）

　　2.2向服务器发送大量数据（POST 没有数据量限制）

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

	//一个简单的get请求

	xmlhttp.open("GET","demo.asp",true);

	xmlhttp.send();

	//但这样可能得到的是缓存的结果，为了避免这种情况，向URL添加一个唯一的ID

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

	xmlhttp.send();

	//一个简单的post请求

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

	xmlhttp.send();

	//如果需要像HTML表单一样提交数据，请使用setRequestHeader()添加http头，然后在send()方法中加上希望发送的数据

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

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

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

3.异步--true or false

　　AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true。

    xmlhttp.open("GET","demo.asp",true);    //get请求

    xmlhttp.open("POST","demo.asp",true);    //post请求

　　对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。通过 AJAX，JavaScript 无需等待服务器的响应，而是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

　　当使用 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();

　　如需使用 async=false，请将 open() 方法中的第三个参数改为 false。不推荐使用 async=false，但是对于一些小型的请求，也是可以的。这时JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。当使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

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

xmlhttp.send();

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

　　小结：当async=true时，js无需等待服务器响应，可以继续往下执行，当服务器响应完毕，类似通知的形式，js对响应进行处理（在onreadystatechange()函数里）；而当async=false时，js则需要等待服务器的处理结果，这时程序挂起，无需编写onreadystatechange()函数。

4.服务器的响应

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

	//responseText 属性返回字符串形式的响应

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

	//如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML

	xmlDoc=xmlhttp.responseXML;

	txt="";

	x=xmlDoc.getElementsByTagName("title");

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

		txt=txt + x[i].childNodes[0].nodeValue + "<br />";

	}

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

5.onreadystatechange()

　　当请求被发送到服务器时，需要执行一些基于响应的任务。readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时，就会触发 onreadystatechange 事件。

　　下面是 XMLHttpRequest 对象的三个重要的属性：

	//当 readyState 等于 4 且状态为 200 时，表示响应已就绪

	xmlhttp.onreadystatechange=function(){

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

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

		}

	}

注意：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

6.ajax数据库实例

　　与数据库进行动态通信

//当用户在上面的下拉列表中选择某个客户时,会显示该客户的详细信息

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

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","/ajax/getcustomer.asp?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form action="" style="margin-top:15px;">

<label>请选择一位客户：

<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">

<option value=""></option>

<option value="APPLE">Apple Computer, Inc.</option>

<option value="BAIDU ">BAIDU, Inc</option>

<option value="Canon">Canon USA, Inc.</option>

<option value="Google">Google, Inc.</option>

<option value="Nokia">Nokia Corporation</option>

<option value="SONY">Sony Corporation of America</option>

</select>

</label>

</form>

<br />

<div id="txtHint">客户信息将在此处列出 ...</div>

</body>

</html>

效果如下：

7.ajax-xml实例

　　与xml文件进行交互式通信。

//使用 AJAX 来读取来自 XML 文件的信息

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function loadXMLDoc(url)

{

var xmlhttp;

var txt,x,xx,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)

    {

    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";

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

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

      {

      txt=txt + "<tr>";

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

        {

        try

          {

          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

          }

        catch (er)

          {

          txt=txt + "<td> </td>";

          }

        }

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

        {

        try

          {

          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

          }

        catch (er)

          {

          txt=txt + "<td> </td>";

          }

        }

      txt=txt + "</tr>";

      }

    txt=txt + "</table>";

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

    }

  }

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

xmlhttp.send();

}

</script>

</head>

<body>

<div id="txtCDInfo">

<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>

</div>

</body>

</html>

cd_catalog.xml：

<CATALOG>

    <CD>

        <TITLE>Empire Burlesque</TITLE>

        <ARTIST>Bob Dylan</ARTIST>

        <COUNTRY>USA</COUNTRY>

        <COMPANY>Columbia</COMPANY>

        <PRICE>10.90</PRICE>

        <YEAR>1985</YEAR>

    </CD>

    <CD>

        <TITLE>Hide your heart</TITLE>

        <ARTIST>Bonnie Tyler</ARTIST>

        <COUNTRY>UK</COUNTRY>

        <COMPANY>CBS Records</COMPANY>

        <PRICE>9.90</PRICE>

        <YEAR>1988</YEAR>

    </CD>

</CATALOG>

ajax--底层代码的更多相关文章

  1. JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建

    1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...

  2. 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回

    首先导入jar包 上面的jar包主要是用来将map或list数据转换成json字符串,传递到前台使用. 静态页面的代码:2.html <!DOCTYPE html> <html> ...

  3. java中CRUD(增删查改)底层代码的实现

    java中CRUD(增删查改)底层代码的实现: package com.station.dao; import com.station.model.Product; import java.sql.* ...

  4. 底层代码创建GUI

    %底层代码创建GUI hf = figure(... 'Units','Normalized',... 'Color','w',... 'Position',[0.1 0.1 0.8 0.8]); h ...

  5. 图像的点运算----底层代码与Halcon库函数

    最基本的图像分析工具----灰度直方图.使用直方图辅助,可以实现4大灰度变换,包括线性灰度变换(灰度拉伸).灰度对数变换.灰度伽马变换.灰度分段线性变换:使用直方图修正技术,可以实现2大变换,包括直方 ...

  6. Java反射简单使用--第一次细致阅读底层代码

    1:所写的东西都经过验证,保证正确,环境jdk8,eclipse2:在例子中,尽量以生产环境中实际代码为例,那种固定值什么的没什么意义 问题: 1:想获取调用方法所需要的参数 2:参数是以json形式 ...

  7. ArrayList底层代码解析笔记

    通过底层代码可以学习到很多东西: public class ArrayList<E> extends AbstractList<E> implements List<E& ...

  8. js(三) ajax异步局部刷新技术底层代码实现

    ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的 ...

  9. Nova创建虚拟机的底层代码分析

    作为个人学习笔记分享.有不论什么问题欢迎交流! 在openstack中创建虚拟机的底层实现是nova使用了libvirt,代码在nova/virt/libvirt/driver.py. #image_ ...

  10. ceph 底层代码分享

    一.底层工作队列 二.对象操作 三.上下文(Context)代码分析:

随机推荐

  1. 3层+SVN学习笔记（1）

    public List<MemberTypeInfo> GetList() { //查询未删除的数据 string sql = "select * from memberType ...

  2. 2018.10.22 bzoj4380: [POI2015]Myjnie（区间dp）

    传送门 区间dp好题. f[i][j][k]f[i][j][k]f[i][j][k]表示区间[i,j][i,j][i,j]最小值为kkk时的最大贡献. 然后可以枚举端点转移. 当时口胡到这儿就不会了. ...

  3. 2018.09.08 bzoj1151: [CTSC2007]动物园zoo（状压dp）

    传送门 状压dp好题啊. 可以发现这道题的状压只用压缩5位. f[i][j]表示当前在第i个位置状态为j的最优值. 显然可以由f[i-1]更新过来. 因此只用预处理在第i个位置状态为j时有多少个小朋友 ...

  4. Linux抓包

    默认系统里边没有安装有tcpdump的,无法直接使用   这里我们可以使用yum来直接安装它 yum install -y tcpdump   如果忘记了这个软件的用法,我们可以使用 tcpdump ...

  5. 12) maven-compiler-plugin

    The Compiler Plugin is used to compile the sources of your project. At present the default source se ...

  6. CreateDialog()与CreateDialogIndrect()

    CreateDialog() 概述 函数功能:CreateDialog宏从一个对话框模板资源创建一个无模式的对话框,CreateDiaog宏使用CreateDialogParam函数. 函数原型:HW ...

  7. HDU1459 非常可乐(BFS) 2016-07-24 15:00 165人阅读 评论(0) 收藏

    非常可乐 Problem Description 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶 ...

  8. Java中对比两个对象中属性值[反射、注解]

    在Java中通常要比较两个对象在修改前与修改后的值是否相同,一般我们采用的是反射技术获取对象的get方法[或其他的方法]获取值并做比较.如果系统将修改的属性名称也显示出来,这样就能更直观的显示类中的哪 ...

  9. Android sdcard文件读写操作

    这次演示以,安卓原生操作系统 Nexus_6手机进行操作: AndroidManifest.xml配置相关权限: <!-- 增加权限 --> <uses-permission and ...

  10. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...