javascript――ajax应用 - JAVA

概念

AJAX 指异步java script及XML（Asynchronous java script And XML）。Ajax的核心是java script对象XmlHttpRequest。XmlHttpRequest使开发者可以使用java script向服务器提出请求并处理响应，而不阻塞用户。

创建XmlHttpRequest对象

由于所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，所以此类浏览器创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）把XmlHttpRequest对象实现为ActiveX 对象，所以对于老版本的Internet Explorer创建XmlHttpRequest对象的方式为：

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

为了实现对所有现代浏览器的兼容，根据能力检测判断原则统一创建XmlHttpRequest对象的方式为：

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

XmlHttpRequest对象方法：

ajax实现与服务器交换数据的两种请求方式

XmlHttpRequest对象的open方法第一个参数可以设置对服务器调用的方式，分别为Get和Post

get方式

使用get方式通常将需要传递的数据附在url之后，而此时send的内容为null,并且get方式不要设置首部内容（setRequestHeader("header","value")）

例


<script type="text/java script">
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","/ajaxget.ashx",true);
xmlhttp.send();
}



AJAX

post方式

使用post方式将要发送的数据设置为send方法的参数，采用post方式必须设置首部内容setRequestHeader("header","value")

例


<script type="text/java script">
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("POST","/ajax2post.ashx",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=steven&name=jobs");
}



AJAX

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

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

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

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

服务器响应数据类型

XmlHttpRequest对象的responseText属性可以接收服务器传回的字符串型数据，responseXml属性可以接收服务器传回的Xml类型数据

onreadystatechange 事件

在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪，即前台脚本可继续执行。


<script type="text/java script">
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","/ajaxtest.txt",true);
xmlhttp.send();
}




  
   Let AJAX change this text

ajax应用场景

1.表单驱动的交互

传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷

javascript――ajax应用(一)

概念