ajax学习笔记

ajax学习笔记

理论上说,Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成.

 

一,XMLHttpRequest 对象  是ajax的主要工作对象是

一个完整的声明一个兼容各浏览器的XMLHttpRequest 的js代码如下

<script language="javascript" type="text/javascript">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
}  catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}  catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}  catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!,此浏览器不支持");
}
</script>

 

在ajax编程中,还会常用到的一个语句是

document.getElementById("phone").value ,取得值

调用request对象来向服务器发请求时,js代码如下,

function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "getCustomer.asp?phone=" + escape(phone);//getCustomer.asp为请求的页面
request.open("GET", url, true); //这个地方已将信息发到缓存
request.onreadystatechange = updatePage;//这个表示,请求发出到服务器的状态反馈,updatePage事件为自定义错误处理
request.send(null);//发送
}
function updatePage() {
 if (xmlHttp.readyState == 1) 
{
document.getElementById("flag").innerHTML = "正在加载连接对象......";
}
if (xmlHttp.readyState == 2) 
{
document.getElementById("flag").innerHTML = "连接对象加载完毕。";
}
if (xmlHttp.readyState == 3)  {
document.getElementById("flag").innerHTML = "数据获取中......";}
if (request.readyState == 4)
       if (request.status == 200)
      alert("Server is done!服务器已收到,");
     else if (request.status == 404)
     alert("Request URL does not exist,发送的地址错了,没有此页面");
     else if (request.status == 403) {
     alert("Access denied.无权访问");
     else
     alert("Error: status code is " + request.status);
}

附一:XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数：

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。

url：要连接的 URL。

asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。

username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。

password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

附二:关于request.readyState 的状态,有

0：请求没有发出（在调用 open() 之前）。

1：请求已经建立但还没有发出（调用 send() 之前）。 一般用不着这之前

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。

3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。

4：响应已完成，可以访问服务器响应并使用它。

 

若请求正常,且页面有反回的输出信息时,将updatePage方法处理再改成

 

function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");   //切割字符串
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML =response[1].replace(/\n/g, "");
}  else
alert("status is " + request.status);
}
}

 

 

附三:

XMLHttpRequest成员,对象

属性有

onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写

readyState  返回当前请求的状态，只读.

responseBody  将回应信息正文以unsigned byte数组形式返回.只读

responseStream 以Ado Stream对象的形式返回响应信息。只读

responseText 将响应信息作为字符串返回.只读

responseXML 将响应信息格式化为Xml Document对象并返回，只读

status 返回当前请求的http状态码.只读

statusText  返回当前请求的响应行状态，只读

方法

abort 取消当前请求

getAllResponseHeaders 获取响应的所有http头

getResponseHeader 从响应信息中获取指定的http头

open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

send 发送请求到http服务器并接收回应

setRequestHeader 单独指定请求的某个http头 ()

事件

无

 

二, document.createElement("html标签"),创建页面元素

取得了值了,就要显示出来了,通常都是用js动态创建元素,插入到当前页元素了

2.1在一个table表格内增加行内容,控件

var row = document.createElement("tr");
row.setAttribute("id", name);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () {
deleteSort(name);
} ;
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);

在html页的table相应增加行的位置,放一句<tbody id="sortList"></tbody>

2.2 相应的删除表行js如下:
function deleteSort(id) {
if (id!=null){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}

2.3一个完整的读取标准和RSS订阅xml文档的代码
<script language="javascript">
var XML_Http_Request = false;
function createXMLHttpRequest(){
//创建XMLHttpRequest对象,
XML_Http_Request = false;
if(window.XMLHttpRequest){
//for Mozilla
 XML_Http_Request = new XMLHttpRequest();
if(XML_Http_Request.overrideMimeType){
XML_Http_Request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
 //for IE
try{
XML_Http_Request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
XML_Http_Request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
}
function send_Request(url){
//读取标准xml订阅
createXMLHttpRequest();
if(!XML_Http_Request){
window.alert("Cannot create XMLHttpRequest instance!");
return false;
}
XML_Http_Request.onreadystatechange = processRequest;
XML_Http_Request.open("GET",url,true);
//true---异步;false---同步
XML_Http_Request.send(null);
}
function processRequest(){
if(XML_Http_Request.readyState == 4) {
if(XML_Http_Request.status == 200) {
/***********************处理内容部分*****************************/
//statements  
 var results = XML_Http_Request.responseXML;
var title = null;
var item = null;
var link = null;
var description = null;
var ccc = results.getElementsByTagName("channel");
var headtitle = ccc[0].getElementsByTagName("title")[0].firstChild.nodeValue;
var headlink = ccc[0].getElementsByTagName("link")[0].firstChild.nodeValue;
var cell = document.createElement("div");
cell.innerHTML = "<h1><a href="+headlink+" target=_blank>"+headtitle+"</a></h1><br>";
document.getElementById("result").appendChild(cell);
var items = results.getElementsByTagName("item");
for(var i = 0; i < items.length; i++) {
item = items[i];
link=item.getElementsByTagName("link")[0].firstChild.nodeValue;
title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
var cell = document.createElement("div");
cell.innerHTML = "<li><a href="+link+" target=_blank>"+title+"</a></li><br>";
document.getElementById("result").appendChild(cell);
}
/*******************************************************************************/
} } }
</script>
</head>
<body onLoad="javascript:send_Request('http://www.cnblogs.com/jxghost/Rss.aspx');">
<div id="result"></div>

2.34利用XMLHttpRequest窃取动态网页的某一部分(网页有规律).

代码目标是取得证券交易公司网站的交易报表部分. 目标页是:http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate= 2006-10-20

这一部分是jsp动态生成的,正好表头以  <td class="info-head" width="400" valign="top">开始,表尾以</td></tr>结速,
<script language="javascript">
window.onload = function()
{
CreateDateSelect();
}
var xmlHttp = false;
var e; //创建XMLHTTP对象
function getXMLHTTPObj()
{
var C = null;
try {
C = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
C = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(sc) {
      C = null;}
}
if( !C && typeof XMLHttpRequest != "undefined" ) { C = new XMLHttpRequest();}
return C;
}
//调用远程方法
function callServer(e)  {
try {
if( xmlHttp && xmlHttp .readyState != 0 ) { xmlHttp.abort();}
xmlHttp = getXMLHTTPObj();
if( xmlHttp )  {
document.getElementById("outgroup").style.display = "none";
var dateSele = e.options[e.selectedIndex].value; //获取查询日期
document.getElementById("date").innerHTML = dateSele + " 开放式基金净值";
var url = "http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=" + dateSele; //构造查询连接字符串
xmlHttp.open("GET", url, true); //打开连接
xmlHttp.onreadystatechange = updatePage; //设置回调函数
xmlHttp.send(null); //发送请求   }
else {
document.getElementById("flag").innerHTML = "XMLHTTP对象创建失败";   }
}
catch (e) {
document.getElementById("flag").innerHTML = "查询错误:" + e;}
}
//回调处理函数
function updatePage()  {
try {
 if (xmlHttp.readyState == 1) 
{
document.getElementById("flag").innerHTML = "正在加载连接对象......";
}
if (xmlHttp.readyState == 2) 
 {
document.getElementById("flag").innerHTML = "连接对象加载完毕。";
}
if (xmlHttp.readyState == 3) 
{
document.getElementById("flag").innerHTML = "数据获取中......";
}
if (xmlHttp.readyState == 4) 
 {   //以下切割页面,取得所要的部分html代码
var response = xmlHttp.responseText;
var OpenValue = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[1];
var OpenValue = OpenValue.split("</td></tr>")[0];
//alert(OpenValue);
 document.getElementById("out").innerHTML = OpenValue;
var OpenValue1 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[2];
var OpenValue1 = OpenValue1.split("</td></tr>")[0];
document.getElementById("out1").innerHTML = OpenValue1;
var OpenValue2 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[3];
var OpenValue2 = OpenValue2.split("</td></tr>")[0];
document.getElementById("out2").innerHTML = OpenValue2;
var OpenValue3 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[4];
var OpenValue3 = OpenValue3.split("</td></tr>")[0];
document.getElementById("out3").innerHTML = OpenValue3;
document.getElementById("flag").innerHTML = "查询结束";
document.getElementById("outgroup").style.display = ""; //送显
} }
catch (e)  {
document.getElementById("flag").innerHTML = "回调处理错误:" + e;
} }
//创建日期选择下拉框
function CreateDateSelect()
{
var html = [];
for(var iYear=2005; iYear<=2006; iYear ++)  {
for( var iMonth=1; iMonth<=12; iMonth ++ ) {
for( var iDay=1; iDay<=31; iDay ++ ) {
html[html.length] = "<option value=\"" + iYear + "\-" + iMonth + "\-" + iDay + "\">" + iYear + "年
 + iMonth + "月" + iDay + "日" + "</option>";
} }}
document.getElementById("dateSele").innerHTML = "<select name=\"dateSele\" id=\"dateSele\" onchange
\"callServer(this);\">" + html.join("") + "</select>";
}  
</script>
</head>
<body>
<form>
<div>请选择交易日期:</div>
<div>
<div id="dateSele" align=left>
</div>
<div id="flag" align=right></div>
</div>
<div id="date"></div>
<div id="outgroup" style="display:None">
 <div id="out"></div>
<div id="out1"></div>
<div id="out2"></div>
<div id="out3"></div>
</div>
</form>
</body>

DOM对象是Ajax编程的主要操作对象.