ajax从入门到精通

最新推荐文章于 2022-03-08 23:54:28 发布

请叫我第一名

最新推荐文章于 2022-03-08 23:54:28 发布

阅读量1.2k

点赞数

分类专栏： ajax从入门到精通文章标签： ajax从入门到精通 ajax

本文链接：https://blog.csdn.net/u011945064/article/details/43448605

版权

ajax从入门到精通专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax（Asynchronous JavaScript and XML）.

先看段代码，然后再分析这段代码：

jsp页面：

<span style="white-space:pre">	</span><body>
  <span style="white-space:pre">	</span>  <label for="txt_username">
   <span style="white-space:pre">	</span>     姓名:</label>
 <span style="white-space:pre">	</span>   <input type="text" id="txt_username" />
 <span style="white-space:pre">	</span>   <br />
   <span style="white-space:pre">	</span> <label for="txt_age">
  <span style="white-space:pre">	</span>      年龄:</label>
  <span style="white-space:pre">	</span>  <input type="text" id="txt_age" />
 <span style="white-space:pre">	</span>   <br />
  <span style="white-space:pre">	</span>  <input type="button" value="GET" id="btn" οnclick="btn_click();" />
  <span style="white-space:pre">	</span>  <div id="result">
 <span style="white-space:pre">	</span>   </div>
<span style="white-space:pre">	</span></body>

js代码：

	<script type="text/javascript">
		function btn_click(){
			var xhr;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.open(get,"index.do?username="+username+"&password="+password, true);
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4 && xhr.status==200){
					document.getElementById("result").innerHTML=xhr.responseText;
				}
			}
			xhr.send(null);
			
		}
	</script>

现在来分析这段代码，ajax只能写在JavaScript中，因为ajax需要在不刷新页面的情况下执行某种动作，只能用JavaScript来执行动作。

在JavaScript代码中，首先获取XMLHttpRequest对象。 XMLHttpRequest对象可以再不向服务器提交整个页面的条件下，实现页面的局部刷新。XMLHttpRequest对象是AJAX的核心。

XMLHttpReuest现在以获取浏览器的全面支持，但是不同版本浏览器获取的方式不同，所以获取是要判断不同的浏览器版本。

xhr.open(get,"index.do?username="+username+"&password="+password, true);

xhr.open(method,url,async);规定请求的类型、URL 以及是否异步处理请求。

类型：get和post方式。

那什么时候使用get？什么时候使用post？

大多数情况下，get比post请求更加高效，快捷。

当出现以下情况是推荐使用post请求。

1、传输的数据量过大时，用get传输显得过去不清楚，或者超出了get的传输范围时。

2、跳过浏览器缓存。有些浏览器在短时间能请求相同地址时，浏览器不会真的访问服务器重新进行请求，会调用浏览器的缓存。如果你想跳过缓存时，推荐使用post。用get也是可以，只要在URL后面添加个随机数就行，但显得比较繁琐

3、出现未知字符时，推荐使用post。

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader:向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值.

在send中添加数据。

xhr.onreadystatechange=function()

当XMLHttpRequest对象的状态发生改变时，调用这个方法，执行动作。

if(xhr.readyState==4 && xhr.status==200)

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

document.getElementById("result").innerHTML=xhr.responseText;

xhr对象有两种返回方法：responseText()和responseXML()。

前一种只能返回字符串或者是json格式，后者接收的是xml格式的信息。

下面介绍json和xml的解析方式。

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,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();
}

json的解析方式：暂时先不讲，等会修改后再说，

请叫我第一名

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ajax从入门到精通

ajax（Asynchronous JavaScript and XML）.先看段代码，然后再分析这段代码：jsp页面：姓名: 年龄: js代码： function btn_click(){ var xhr; if(
复制链接

扫一扫