javascript之Ajax起步
Posted liguangsunls
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript之Ajax起步相关的知识，希望对你有一定的参考价值。
XMLHttpRequest readyState属性的值：
UNSENT——0——已创建XMLHttpRequest对象。
OPENED——1——已调用open方法；
HEADERS_RECEIVED——2——已收到server响应的标头；
LOADING——3——已收到server响应。
DONE——4——响应完毕或已失败；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>上海远地资产管理有限公司</title> <meta name="author" content="jason"/> <meta name="description" content="上海远地资产管理有限公司（简称：远地资产）。是一家专业的互联网金融服务平台."/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <style type="text/css"> </style> </head> <body> <div> <button>Apples</button> <button>Cherries</button> <button>Bananas</button> </div> <div id="target"> 载入内容 </div> <script> var buttons=document.getElementsByTagName("button"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=handleButtonPress; } function handleButtonPress(e){ //创建XMLHttpRequest对象 var httpRequest=new XMLHttpRequest(); //给readystatechange事件设置一个事件处理器 httpRequest.onreadystatechange=handleResponse; //使用open方法来指定HTTP方法和须要请求的URL httpRequest.open("GET", e.target.innerHTML+".html"); //给server发送数据 httpRequest.send(); } function handleResponse(e){ //处理响应 if(e.target.readyState==XMLHttpRequest.DONE && e.target.status==200){ document.getElementById("target").innerHTML= e.target.responseText; } } </script> </body> </html>apples.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apples</title>
</head>
<body>
<p>
<img src="images/apple.png"/>
苹果（Apple），是最常见的水果，[1] 苹果树属于蔷薇科。落叶乔木。叶椭圆形，有锯齿。
其果实球形。味甜，口感爽脆。且富含丰富的营养。是世界四大水果之冠。苹果通常为红色。只是也有黄色和绿色。
苹果是一种低热量食物。每100克仅仅产生60千卡热量。苹果中营养成份可溶性大，易被人体吸收。故有“活水”之称，其有利于溶解硫元素，使皮肤润滑娇嫩.
</p>
</body>
</html>
bananas.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apples</title>
</head>
<body>
<p>
<img src="images/banana.png"/>
香蕉（学名：Musa nana Lour.）芭蕉科芭蕉属植物，又指其果实。热带地区广泛栽培食用。
香蕉味香、富于营养。终年可收获。在温带地区也非常受重视。植株为大型草本。从根状茎发出，由叶鞘下部形成高3～6公尺(10～20尺)的假杆；
叶长圆形至椭圆形。有的长达3～3.5公尺(10～11.5尺)，宽65公分(26寸)，10～20枚簇生茎顶。
穗状花序大，由假杆顶端抽出，花多数，淡黄色；果序弯垂。结果10～20串。约50～150个。
植株结果后枯死。由根状茎长出的吸根继续生殖。每一根株可活多年。原产亚洲东南部：台湾、海南、广东、广西等地区均有栽培。
</p>
</body>
</html>
cherries.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apples</title>
</head>
<body>
<p>
<img src="images/cherries.jpg"/>
大樱桃是我国北方落叶果树中继中国樱桃之后果实成熟最早的果树树种。
中医药学觉得。大樱桃具有调中补气。祛风湿的功能。
农业专家称：积极发展大樱桃生产，有着广阔的前景。樱桃属于蔷薇科落叶乔木果树。
</p>
</body>
</html>
按下Applesbutton后，浏览器会异步运行并取回所请求的文档：
以上是关于javascript之Ajax起步的主要内容，如果未能解决你的问题，请参考以下文章