Ajax

最新推荐文章于 2024-08-11 21:47:18 发布

Mr.William.C

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量138

点赞数 1

本文链接：https://blog.csdn.net/demoBigChen/article/details/90757927

版权

Ajax

一、Ajax

Ajax:异步的Javascript和XML,用于完成局部刷新

二、原生Ajax实现方式

1、创建

xhr = new XMLHttpRequest()；
通过new它可以创建一个ajax对象【兼容IE需要创建ActiveXObject】

a、方法

xhr.open(methodType,methodUrl,isSys) -> 准备请求的方式与路径
methodType:请求的方式(GET/POST)
methodUrl:请求的路径
isSys:是否异步(默认为true)
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
设置请求头的一个类型，如果是POST请求，一定要加这一句，才可以把数据传到后台
位置:open之后，send之前
xhr.send(varBody) -> 发送请求
varBody:POST请求传参(key=value&key=value&…)

b、属性

xhr.status -> 请求状态(200代表成功)
xhr.readyState -> 响应状态(4代表响应完成)
xhr.responseText -> 获取返回的数据(字符串)

c、事件

xhr.onreadystatechange =function(){} -> 监听readyState状态的变化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
	function login() {
		var username=document.getElementById("username").value;
		var password=document.getElementById("password").value;
		var xhr = new XMLHttpRequest();
		//get请求在路径中传参，post请求在send()中传参
		//xhr.open("get","/login?username="+username+"&password="+password);
		xhr.open("post","/login");
		//post请求必须(在open方法后,send方法前)设置setRequestHeader("content-type","application/x-www-form-urlencoded");
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.onreadystatechange=function(){
			if(xhr.status==200 && xhr.readyState==4){
				var result = xhr.responseText;//返回的是字符串
				if (result=="true") {
					//window.location.href="www.baidu.com";
					alert(11);
				}else {
					document.getElementById("errorSpan").innerHTML="用户名或密码错误!!";
				}
			}
		}
		xhr.send("username="+username+"&password="+password);
	}

</script>
</head>
<body>
<span id="errorSpan"></span>
<form action="/login" method="post">
	用户名：<input type="text" name="username" id="username"/><br/>
	密码：<input type="password" name="password" id="password"/><br/>
	<input type="button" value="确定" onclick="login()"/>
</form>

</body>
</html>

注：

使用Ajax请求，后台不进行跳转，只做数据的传输
返回的值都是字符串，需要我们自己做相当的判断与转换

三、json（js的对象）

var json = {}；
var json = []；

把一个json字符串转换成json对象

eval("("+jsonStr+")") -> 前后加括号
JSON.parse(jsonStr) -> 必需是标准的json(key必需有双引号)

四、jQuery（是一个js框架）

1、引入js文件

放在webapp下

2、使用

$.post/get(url,[params,callback])

params有两种写法:
a、{username:xxxx}/username=xxxx
b、可以直接拿到表单中的所有参数:$("#form").serialize();
注：serialize() -> 表单序列化
$.get/post(url,params,function(){

})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	
	function login() {
		//serialize() -> 表单序列化
		var params=$('#loginForm').serialize();
		$.post("/login",params,function(result){
			if (result) {
				window.location.href="https://www.bilibili.com/";
			} else {
				$('#errorSpan').html("用户名或密码错误!");
			}
		});
		
	}
	
</script>
</head>
<body>

<span id="errorSpan"></span>
<form action="/login" id="loginForm" method="post">
	用户名：<input type="text" name="username" id="username" /> <br />
	密码<input type="text" name="password" id="password" /><br />
	<input type="button" value="登录" onclick="login()"/>
</form>

</body>
</html>