小结Ajax

最新推荐文章于 2024-07-14 12:57:13 发布

vcycyv

最新推荐文章于 2024-07-14 12:57:13 发布

阅读量171

点赞数

分类专栏： UI &amp; MVC 文章标签： xmlhttprequest newline function null ajax html

本文链接：https://blog.csdn.net/vcycyv/article/details/6253810

版权

UI & MVC 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax是一组技术的集合：javascript, css, DOM, XMLHttpRequest.

其中XMLHttpRequest是达到异步效果的核心部件。

一个异步的例子，摘自Ajax in Action:

 

    
    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   
"http://www.w3.org/TR/html4/loose.dtd"> 
   
<html> 
   
<head> 
   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
   
<title>无标题文档
    
    title> 
   
<script type="text/javascript">   1:  
   
var req=null;
   
var console=null;
   
var READY_STATE_UNINITIALIZED=0;
   
var READY_STATE_LOADING=1;
   
var READY_STATE_LOADED=2;
   
var READY_STATE_INTERACTIVE=3;
   
var READY_STATE_COMPLETE=4;
   
function sendRequest(url,params,HttpMethod)
   
{
   
   if(!HttpMethod)
   
   {
   
     HttpMethod="GET";
   
   }
   
   req=initXMLHTTPRequest();
   
   if(req)
   
   {
   
      req.onreadystatechange=onReadyState;
   
      req.open(HttpMethod,url,true);
   
      req.setRequestHeader("Content-Type","appplication/x-www-form-urlencoded");
   
      req.send(params);
   
   } 
   
}
   
  
   
function initXMLHTTPRequest()
   
{
   
  var xRequest=null;
   
  if(window.XMLHttpRequest)
   
  {
   
     xRequest=new XMLHttpRequest();
   
  }
   
  else if(window.ActiveXObject)
   
  {
   
     xRequest=new ActiveXObject("Microsoft.XMLHTTP");
   
   }
   
   return xRequest;
   
  
   
}
   
  
   
function onReadyState()
   
{
   
  var ready=req.readyState;
   
  var data=null;
   
  if(ready==READY_STATE_COMPLETE)
   
  {
   
     data=req.responseText;
   
  }
   
  else
   
  {
   
     data="loading...["+ready+"]";
   
  }
   
  toConsole(data);
   
  
   
}
   
  
   
function toConsole(data)
   
{
   
  if(console!=null)
   
  {
   
     var newline=document.createElement("div");
   
     console.appendChild(newline);
   
     var txt=document.createTextNode(data);
   
     newline.appendChild(txt);
   
  }
   
}  
   
  window.οnlοad=function()
   
  {
   
    console=document.getElementById("console");
   
    sendRequest("data.txt"");
   
  }
   
  
   
    script> 
   

    
    head> 
   
   
   
<body> 
   
<div id="console">aaa
    
    div> 
   
   
   

    
    body> 
   

    
    html>

注意其中 req.onreadystatechange=onReadyState;就是定义了callback handler

以后需要关注的一些方面：

DWR: http://directwebremoting.org/dwr/index.html 适合后端为Java的应用. DWR和jQuery是可以混合使用的。

JSON：它可以取代异步调用传输的xml

vcycyv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小结Ajax

Ajax是一组技术的集合：javascript, css, DOM, XMLHttpRequest. 其中XMLHttpRequest是达到异步效果的核心部件。一个异步的例子，摘自Ajax in Action: 1: 3: 4: 5: 6: 无标题文档 7: 8: 9: 10
复制链接

扫一扫