AJAX

u013344815

于 2017-01-06 14:35:55 发布

阅读量305

点赞数

分类专栏： Java web 文章标签： JavaScript ajax xml 异步 xmlhttprequest

本文链接：https://blog.csdn.net/u013344815/article/details/53942269

版权

Java web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

ajax是什么？

参考百科给出的解释：

AJAX即“ A synchronous J avascriptAnd X ML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和 XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
举几个ajax发挥作用的例子：
1.现在普遍的用户注册，当我们输入用户名时，其实页面就已经与后台进行交互了，这样可以第一时间判断我们申请的用户名是否已被申请过，而不必等我们提交时再交互，极大提高了用户体验。
2.现在流行的点赞，当我们点赞时，后面显示的点赞数量会自动加1却没有刷新整个页面，这也是ajax的功劳。

ajax基础
XMLHttpRequest对象
1.创建XMLHttpRequest对象
request=new XMLHttpRequest();——针对Firefox，Opera，Safari浏览器
xmlHttp=new ActiveXObject(Msxml2.XMLHTTP);——IE6+
xmlHttp=new ActiveXObject(Microsoft.XMLHTTP);——其他
2.请求服务器
（1）readyState属性
此属性只读

（2）onreadystatechange属性
一般在readyState属性值改变时触发，使用方法如下：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

具体请参见：点击打开链接
（3）response属性
获取服务器的返回数据
（4）open()方法
三个参数分别是：
GET/POST
URL
异步处理标志
（5）send()方法
综合运用以上几点：

var request=new XMLHttpRequest();
request.open("GET","1.txt",true);
request.onreadystatechange=function(){
	if(request.readyState==4){
		alert(request.response);
	}
}
request.send(null);

3.处理响应

	<body>
		<script type="text/javascript">
			var xmlHttp = null;

			function readyStateChangeHandle() {
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					document.getElementById("god").innerHTML = xmlHttp.responseText;
				}
			}

			function ajaxFunction(the_request_url) {
				try {
					xmlHttp = new XMLHttpRequest();
				} catch(e) {
					try {
						xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
					} catch(e) {
						try {
							xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
						} catch(e) {
							alert("您的浏览器不支持ajax");
							return false;
						}
					}
				}
				if(xmlHttp) {

					xmlHttp.open('GET', the_request_url, true);

					xmlHttp.onreadystatechange = readyStateChangeHandle;

					xmlHttp.send();

				} else {
					alert("连接失败");
				}
			}
		</script>
	
		<!--这里1.txt放在html文件同目录下，内容是：good luck sir-->
		
		<input type="button" id="test" value="test" οnclick="javascript:ajaxFunction('1.txt')" />
		<br/><br/>
		<div style="border:1px solid black;width:300px;height:250px;" id="god">test ajax</div>

	</body>

4.ajax跨域请求——JSONP
参见另一篇博客点这里

u013344815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX

ajax是什么？参考百科给出的解释：AJAX即“Asynchronous JavascriptAnd XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网
复制链接

扫一扫