ajax

最新推荐文章于 2022-06-19 13:50:53 发布

慕之歌

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量95

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/baidu_40450846/article/details/89284383

版权

ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

原生状态的异步刷新：

var xmlHttp ;
if(window.XMLHttpRequest)
{
	xmlHttp = new XMLHttpRequest();
}
else
{
	//老版本IE支持对象
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//状态监听
//当xmlhttp对象的readyState 状态改变时会触发 onreadystatechange事件
xmlHttp.onreadystatechange=function(){
	document.getElementById("info").innerText=xmlHttp.responseText;
	console.log(xmlHttp.readyState,xmlHttp.status,xmlHttp.responseText);
}
//发送请求
// 第一个参数为请求类型 GET POST 第二个参数为请求位置URL 第三个参数为同步/异步
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send()

readyState 状态：
0：对象已经创建，没有调用open

：已经open()
数据接受完成
解析数据，但还不能够使用数据
可以使用数据

状态码：200请求成功。303重定向。400请求错误。401未授权。403禁止访问。500服务器错误，请求地址失败或代码错误。

服务器响应：responseTex字符串形式。responseXML得XML 形式的响应数据。responseContent字节流形式，可用于下载图片。

jQuery实现异步通信

<script type="text/javascript">
function get(){
	//第一个参数为URL 第二个参数为回调
	// 回调参数 响应数据 状态吗 xmlhttprequest对象
	$.get("data/content.txt",function(data,status,xhr){
			document.getElementById("info").innerText=data;
			console.log(status,xhr);
	});
}
</script>

AjAx方法

<script type="text/javascript">
	function ajax(){
		$.ajax({
					url:"http://localhost:3000?name=zzy",
					type:"post",
					data:{na:"zz",age:"20"},
					success:function(data,status,xhr)
							{
								document.getElementById("info").innerText=data;
									console.log(status,xhr);
							},
					});
}
</script>

智能词条

<!--开发要认真 三思而后行 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				}
			#container{
				margin: 100px auto;
				width: 400px;
				background-color: #808080;
			}
			#kw{
				width: 400px;
				background-color: #CECECE;
			}
			ul{
				/* display: none; */
			}
			ul li{
				list-style: none;
				background-color:#FFC0CB;
				margin-bottom: 1px;
			}
		</style>
</head>
<body>
	<div id="container">
		<input type="text" name="kw" id="kw" value="" />
		<ul id="msg">
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var kw = $("#kw");
		kw.keyup(function(){
			$.ajax({
				url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?",
				type:"get",
				data:{wd:kw.val()},
				dataType:"jsonp",//跨域问题
				success:function(msg){
					$("ul").empty();
					var msgs=msg.s;
					for(var i=0;i<msgs.length;i++){
							var str="<li>"+ msgs[i] +"</li>";
							$("ul").append(str)
					}
				}
			})
			});
	</script>
</body>
</html>

慕之歌

关注

0
点赞
踩
0

收藏

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

原生状态的异步刷新：var xmlHttp ;if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest();}else{ //老版本IE支持对象 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//状态监听//当xmlhttp对象的readyState 状态改变时会触发...
复制链接

扫一扫