AJAX(Asynchronous JavaScript and XML)
-
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
-
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
-
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
-
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
练习
<script type="text/javascript" >
( function () {
console.log("我执行了");
const btn = document.querySelector( "button[type=button]" );
const type = "click" ;
const listener = function(){
// 1、创建 XMLHttpRequest 实例
var $http = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
var method = "GET" ;
//地址一定要写对，否则在发送请求时，无法找到对应的资源，报404错误
var url = "http://localhost:8080/mybatis/user";
// 2、打开连接
$http.open( method , url );
var fn = function(){
if( $http.readyState === $http.DONE ) {
console.log($http.readyState);
var text = $http.responseText ; // 获取由服务器返回的数据
// 将 JSON 格式的文本解析为 JavaScript 对象(instance)
console.log("解析json字符串:"+text);
var o = JSON.parse( text );
console.log(o);
// var emps = o.1 ;
}
};
// 3、设置监听函数
$http.addEventListener( "readystatechange" , fn , false );
// 5、发送请求
$http.send( null );
};
btn.addEventListener( type , listener , false );
})();
</script>
第一种写法：JavaScript异步请求的完整前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>员工信息和领导信息</title>
<link rel="shortcut icon" href="/yangying.jpg" type="image/jpeg">
<style type="text/css">
.container {
box-shadow: 0 0 5px 4px #cfcfcf ;
margin: 15px auto ;
width: 80% ;
overflow: hidden ;
}
.container .employee {
margin: 10px ;
border-bottom: 1px solid #dedede ;
overflow: hidden ;
}
.container .employee:last-child {
border-bottom: none ;
}
.container .employee>* {
float: left ;
width: 25% ;
height: 30px ;
line-height: 30px ;
font-size: 18px ;
font-style: normal ;
font-weight: normal ;
text-decoration: none ;
text-align: center ;
}
</style>
</head>
<body>
<button type="button" >显示员工信息及其直接领导的信息</button>
<div class="container">
<div class="employee">
<i>员工编号</i>
<s>员工姓名</s>
<b>领导编号</b>
<u>领导姓名</u>
</div>
</div>
<script type="text/javascript" >
( function () {
const btn = document.querySelector( "button[type=button]" );
const container = document.querySelector( ".container" );
const type = "click" ;
const listener = function(){
// 1、创建 XMLHttpRequest 实例
var $http = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
var method = "GET" ;
var url = "/employee/search" ;
// 2、打开连接
$http.open( method , url );
var fn = function(){
if( $http.readyState === $http.DONE ) {
var text = $http.responseText ; // 获取由服务器返回的数据
// 将 JSON 格式的文本解析为 JavaScript 对象(instance)
var o = JSON.parse( text );
var emps = o.employees ;
if( emps && Array.isArray( emps ) ) {
emps.forEach( function ( e ) {
var div = document.createElement( "div" );
div.classList.add( "employee" );
var i = document.createElement( "i" );
i.innerHTML= e.empno ;
div.appendChild( i );
var s = document.createElement( "s" );
s.innerHTML= e.ename ;
div.appendChild( s );
if( e.manager ) {
var m = e.manager ;
var b = document.createElement( "b" );
b.innerHTML= m.empno ;
div.appendChild( b );
var u = document.createElement( "u" );
u.innerHTML= m.ename ;
div.appendChild( u );
}
container.appendChild( div );
});
}
// 通过循环处理 员工列表
// 将 每个员工的信息 及其 领导的信息 依次 添加到页面上显示 ( 显示的样式要符合 .employee 定义的样式 )
}
};
// 3、设置监听函数
$http.addEventListener( "readystatechange" , fn , false );
// 5、发送请求
$http.send( null );
};
btn.addEventListener( type , listener , false );
})();
</script>
</body>
</html>
第二种
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<link rel="shortcut icon" href="/yangying.jpg" type="image/jpeg">
</head>
<body>
<h2>异步发送数据</h2>
<form action="/student/sign/up" method="post" >
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="password" name="confirm" placeholder="确认密码">
<input type="submit" value="注册">
</form>
<div class="message"></div>
<script type="text/javascript" >
( function () {
var un = document.querySelector( "input[name=username]" );
var msg = document.querySelector( ".message" );
var fn = function(){
var username = un.value ; // 获取输入框中已经输入的内容
console.log( username );
// 1、创建 可以发送异步请求 和 接受响应 数据的 对象
var $http = new XMLHttpRequest();
var method = "POST" ; // 指定发送请求时使用的请求方式
var url = "/student/check/username" ; // 被访问的资源
// 2、打开连接
$http.open( method , url ) ;
var listener = function(){
console.log( $http.readyState );
if( $http.readyState === XMLHttpRequest.DONE ) { // 当 $http.readyState 为 DONE( 4 ) 时，表示响应结束，并且响应正文已经读取完毕
var jsonText = $http.response ; // 从响应中获取数据
console.log( jsonText );
var o = JSON.parse( jsonText ); // 将 JSON 格式的字符串 解析为 JavaScript 对象(instance)
if( o && o.success ) {
msg.style.color = "green";
} else {
msg.style.color = "red";
}
msg.innerHTML = o.message ;
}
};
// 3、设置对 readyState 的取值发生更改进行监听的监听函数
// $http.onreadystatechange = listener ;
$http.addEventListener( "readystatechange" , listener , false );
var params = null ;
// 4、如果请求方式是POST，则需要设置 请求报头
if( "post" === method.toLocaleLowerCase() ) {
// 通过 content-type 请求报头设置本次向服务器发送的内容的 MIME 类型
$http.setRequestHeader( "content-type" , "application/x-www-form-urlencoded" );
// 准备需要发送的请求数据
params = "username=" + username ;
}
// 5、发送请求(因为是POST请求，所以可以通过send函数的参数发送请求数据)
$http.send( params );
};
// blur 表示失去焦点
// focus 表示获得焦点
un.addEventListener( "blur" , fn , false );
})();
</script>
</body>
</html>
第三种写法
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<link rel="shortcut icon" href="/yangying.jpg" type="image/jpeg">
</head>
<body>
<h2>异步发送数据</h2>
<form action="/student/sign/up" method="post" >
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="password" name="confirm" placeholder="确认密码">
<input type="submit" value="注册">
</form>
<div class="message"></div>
<script type="text/javascript" >
( function () {
var un = document.querySelector( "input[name=username]" );
var msg = document.querySelector( ".message" );
var fn = function(){
var username = un.value ; // 获取输入框中已经输入的内容
console.log( username );
// 1、创建 可以发送异步请求 和 接受响应 数据的 对象
var $http = new XMLHttpRequest();
var method = "GET" ; // 指定发送请求时使用的请求方式
var url = "/student/check/username?username=" + username ; // 被访问的资源
// 2、打开连接
$http.open( method , url ) ;
// 3、设置对 readyState 的取值发生更改进行监听的监听函数
$http.onreadystatechange = function(){
console.log( $http.readyState );
if( $http.readyState === 4 ) { // 当 $http.readyState 为 4 时，表示响应结束
var jsonText = $http.response ; // 从响应中获取数据
console.log( jsonText );
var o = JSON.parse( jsonText ); // 将 JSON 格式的字符串 解析为 JavaScript 对象(instance)
if( o && o.success ) {
msg.style.color = "green";
} else {
msg.style.color = "red";
}
msg.innerHTML = o.message ;
}
}
// 4、
// 5、发送请求
$http.send( null );
};
// blur 表示失去焦点
// focus 表示获得焦点
un.addEventListener( "blur" , fn , false );
})();
</script>
</body>
</html>
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
