ajax 异步 javaScript and xml
开发五步骤:
1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery
2. 找到连接, http的method方法 GET|POST PUT DELETE
3. 注册监听器 有数据返回之后,就会自动调用该方法（不是一次 3次）
4. 发送请求 POST PUT delete 请求数据
5. 处理请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {
margin: 0;
padding: 0
}
</style>
</head>
<body>
<input onkeyup="tips(this)">
<div id="tip"></div>
<script>
function tips(th) {
//创建对象
var req = new XMLHttpRequest();
//打开链接
req.open("GET", "tips.jsp?k=" + th.value);
//注册监听器
req.onreadystatechange = function() {
//0.1.2.3.4 5中状态 我们只需要4(请求完成 )来接收返回来的数据即可 其他情况选择忽略
if (req.readyState == 4) {
//当页面状态200代表请求成功
if (req.status == 200) {
//将传回来的值因为包括页面中的空格，所以利用分割字符串
var arr = req.responseText.split(",");
//循环拼接字符串成ul输出
var str = "<ul>";//头
for (var i = 0; i < arr.length; i++) {
str += "<li>" + arr[i] + "</li>";//中间的li
}
str += "<ul>";//尾
//获取页面tip盒子输出值
document.getElementById("tip").innerHTML = str; }
}
}
//发送请求
req.send();
}
</script>
</body>
</html>
当我们提交类型为POST时，要注意：
1.open打开连接的方式要为(第一个参数)post并且(第二个参数)url为链接地址：
req.open("POST","tips.jsp");
2.设置请求头：
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3.发送请求的时候写上传输的值：
req.send("k="+th.value);
源码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {
margin: 0;
padding: 0
}
</style>
</head>
<body>
<input onkeyup="tips(this)">
<div id="tip"></div>
<script>
function tips(th) {
//创建对象
var req=new XMLHttpRequest();
//打开链接
//req.open("GET","tips.jsp?k="+th.value);
req.open("POST","tips.jsp");
//设置请求头
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//注册监听器
req.onreadystatechange=function(){
if(req.readyState==4){
if(req.status==200){
//将传回来的值因为包括页面中的空格，所以利用分割字符串
var arr = req.responseText.split(",");
//循环拼接字符串成ul输出
var str = "<ul>";//头
for (var i = 0; i < arr.length; i++) {
str += "<li>" + arr[i] + "</li>";//中间的li
}
str += "<ul>";//尾
//获取页面tip盒子输出值
document.getElementById("tip").innerHTML = str; }
}
}
req.send("k="+th.value);
} </script>
</body>
</html>
ajax+jquery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script>
$(function(){
$("input").keyup(function(){
//console.log($(this).val());
//$.get("tips.jsp?k="+$(this).val(),function(data){
$.post("tips.jsp","k="+$(this).val(),function(data){
var arr = data.split(",");
var str = "<ul>";
for(var i=0;i<arr.length;i++){
str+="<li>"+arr[i]+"</li>";
}
str+="</ul>";
$("#tips").html(str);
});
})
})
</script>
<style>
*{margin:0;padding:0}
ul li{ list-style:none;
}
</style>
</head>
<body>
<input>
<div id="tips"></div>
</body>
</html>