Ajax简单实例创建

XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。几乎所有

 

XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。几乎所有的浏览器都支持XMLHttpRequest对象,它是Ajax应用的核心技术。

js代码如下:


<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
 </head>
<script type="text/javascript">
	/**创建 XMLHttpRequest 对象
	*IE7+、Firefox、Chrome、Safari 以及 Opera均内建 XMLHttpRequest 对象
	*IE5,IE6使用ActiveX对象,xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
	**/
	function createXMLHttpRequest(){
		var xmlHttp;
		if (window.XMLHttpRequest)
		{
			xmlHttp = new XMLHttpRequest();
		}else{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.onreadystatechange = function(){
			if (xmlHttp.readyState == 4)
			{
				
				if (xmlHttp.status == 200)
				{	
					document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
				}
			}else{
				document.getElementById("myDiv").innerHTML = "正在加载...";
			}
		};
        //向服务器放松请求
		xmlHttp.open("GET","test.php",true);
		xmlHttp.send();
	}
</script>
 <body>
  <input type="button" onclick="createXMLHttpRequest()" value="请求数据" />
  <div id="myDiv"></div>
 </body>
</html>

对上面js代码部分解释:

(1).XMLHttpRequest对象的onreadystatechange属性,当请求被发送到服务器时,需要执行任务。每当 readyState 改变时,就会触发onreadystatechange事件。

(2).XMLHttpRequest对象的readyState属性,存有 XMLHttpRequest 的状态(0~4)。

    0: 请求未初始化

    1: 服务器连接已建立

    2: 请求已接收

    3: 请求处理中

    4: 请求已完成,且响应已就绪

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

(4).send(content) 向服务器发送请求

 

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtmlhead lang=en meta charset=UTF-8 title/title style body{ /*margin: 0;*/ } #div1{ width: 100px; height: 100px; border: 1px solid red; } /style/headbodydi
ajax请求路径是https的时候,如果服务器没有配置ssl证书,访问此页面时,浏览器控制台会显示SSL ERROR,和一些其他错误,但请求路径是http是,则不会报错 ajax是ajax的post方法 解决办法:在post方法中加上异步参数(async:false)表示ajax是同步的,就行了
本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。 先来看看运
鼠标点击remove链接,根据ajax的返回值删除页面父元素块。 做法如下: $(.remove).bind(click,function(){var div = $(this).parent(); //先获取父级元素$.ajax({type:post,url:$(this).attr(href),dataType:json,data:{id:$(this).attr(id)},success:functi
script language="javascript"&g
当页面加载的图片中含有属性width和height值,则可以使用几句简单的jQuery代码实现等比例缩放,也可以通过JQ内置函数来获图片取宽高。