理解Ajax技术
无刷新技术,在不刷新整个页面的情况下完成页面的请求和响应
提供连续的用户体验
ajax请求是通过异步引擎对象来发送请求的
响应的内容只是需要数据
动态更新页面中的内容,不影响用户在页面中进行其他操作
Ajax:异步刷新技术: Asynchronous JavaScript And Xml
核心技术:XMLHttpRequest对象
原生的ajax get请求
<head>
<title>ajax验证用户名</title>
</head>
<body>
<form action="" ></form>
<p>用户名:<input id="username" type="text" onblur="doblur();"><span id="content"></span></p>
<script>
function doblur() {
var span = document.getElementById("content");
var username = document.getElementById("username").value;
//alert(username)
/*1.创建异步引擎对象 ajax对象*/
var xhr = new XMLHttpRequest();
/*2.设置请求地址*/
var url = "user?username="+username;
/*3.设置open方法*/
xhr.open("GET",url,true);
/*4.发送请求*/
xhr.send();
/*5.设置回调函数*/
xhr.onreadystatechange = function () {
/*判断 就绪码4 状态码200 请求成功状态*/
if (xhr.readyState == 4 && xhr.status == 200){
/*请求成功,接收响应回来的数据*/
var result = xhr.responseText;
if ("exist" == result){
span.innerHTML = "此用户名已注册,换个名字吧!"
} else{
span.innerHTML = "此用户名可以使用!"
}
}
}
}
</script>
</body>
POST请求不一样的地方需要注意:
/*post请求*/
xhr.open("POST",url,true);
/*4.发送请求*/
/*xhr.send();*/
/*post请求必须设置请求头*/
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*POST请求需要携带数据*/
xhr.send("username="+username);
掌握jQusery的$.AJAX()方法
<head>
<meta charset="UTF-8">
<title>使用jQuery实现Ajax</title>
</head>
<body>
<p>用户名:<input id="username" type="text"><span></span></p>
<script type="text/javascript" charset="UTF-8" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
/*绑定失去焦点事件*/
$("#username").blur(function () {
var username = $("#username").val();
var span = $("#username").next();
//alert(username)
/*进行表单判空*/
if (username.trim() == "") {
span.html("<font style='color: red'>用户名不能为空!</font>");
}else{
span.html("");
/*开始进行ajax请求*/
$.ajax({
/*post请求地址*/
url:"user",//请求地址
/*get请求地址*/
/*url:"user?username="+username,*/
type:"POST",//请求方法 get post
/*post请求携带数据 "username="+username*/
data:{"username":username},//请求数据 键值对
datatype:"text",//预期从服务器返回的数据
success:function (result) {//请求成功后所执行的方法 携带result响应回来的数据
if ("exist" == result){
span.html("<span style='color: red'>此用户名已经被注册!</span>")
} else{
span.html("<span style='color: red'>此用户名可以使用!</span>")
}
},
error:function () {//请求失败所执行的方法
alert("系统异常,请重试!")
}
})
}
})
})
</script>
</body>
掌握JSON的使用
JSON (JavaScript Object Notation ) 轻量级数据交互格式 独立的语言格式 通常用户客户端与服务器传输数据
<body>
json对象
<h1 id="h"></h1>
json数组
<h1 id="h1"></h1>
<h1 id="h2"></h1>
json数组对象
<table id="tb" border="1"></table>
<script type="text/javascript" charset="UTF-8" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*1.定义json对象 里面是由一个一个键值对组成 键值对的键通常是字符串 值任意类型object*/
var user = {"username":"张三","age":18,"sex":"男"};
/*解析json 对象 对象名.属性名 */
$("#h").html("<table border='1'>" +
"<tr>" +
"<td>用户名:"+user.username+"</td>" +
"<td>年龄:"+user.age+"</td>" +
"<td>性别:"+user.sex+"</td>" +
"</tr>" +
"</table>");
/*2.定义json数组*/
var array = ["中国","美国","英国","法国"];
$("#h1").html("<ul>" +
"<li>"+array[0]+"</li>" +
"<li>"+array[1]+"</li>" +
"<li>"+array[2]+"</li>" +
"<li>"+array[3]+"</li>" +
"</ul>")
$("#h2").html("<select>" +
"<option>"+array[0]+"</option>" +
"<option>"+array[1]+"</option>" +
"<option>"+array[2]+"</option>" +
"<option>"+array[3]+"</option>" +
"</select>");
/*3.定义数组对象*/
var arrayObject = [{"username":"李四","age":18},{"username":"王五","age":19}];
/*遍历数组对象*/
$.each(arrayObject,function (i, user) {
$("#tb").append(
"<tr>" +
"<td>用户名:"+user.username+"</td>" +
"<td>年龄:"+user.age+"</td>" +
"</tr>"
);
})
</script>
</body>
总结
