Ajax （Asynchronous JavaScript and XML）
同步：
指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；
异步：
指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待
AJAX涉及技术：
- JavaScript : 使用 客户端 JavaScript 实现动态效果
- DOM : 通过 DOM 技术访问 HTML 文档中的元素
- 使用XMLHttpRequest来和服务器进行异步通信
- XML : Extensible Markup Language , 用来实现数据交换 (早期应用较多)
- JSON : 被当作一种特殊的字符串，进行数据交换 (目前是主流)
- HTML : 用来确定页面上显示的内容
- CSS : 用来确定元素的样式
作用：
为了解决局部刷新的问题。
POST请求：
1、创建 可以发送异步请求 和 接受响应 数据的 对象
var $http = new XMLHttpRequest();
2、打开连接
$http.open( method , url ) ;
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
3、设置对 readyState 的取值发生更改进行监听的监听函数
// $http.onreadystatechange = listener ;
$http.addEventListener( "readystatechange" , listener , false );
4、如果请求方式是POST，则需要设置 请求报头
$http.setRequestHeader( "content-type" , "application/x-www-form-urlencoded" );
5、发送请求(因为是POST请求，所以可以通过send函数的参数发送请求数据)
$http.send( params );
<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>
servlet部分：
@WebServlet( "/student/sign/up" )
public class StudentSignUpServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter( "username" );
String password = request.getParameter( "password" );
String confirm = request.getParameter( "confirm" );
System.out.println( "username : " + username );
response.setHeader( "content-type" , "text/html;charset=UTF-8" ); // response.setContentType( "text/html;charset=UTF-8" );
PrintWriter w = response.getWriter();
w.println( "<h1 style='text-align:center;'>欢迎" + username +"</h1>" );
}
}
GET请求 :
1、创建 可以发送异步请求 和 接受响应 数据的 对象
var $http = new XMLHttpRequest();
2、打开连接
$http.open( method , url ) ;
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
3、设置对 readyState 的取值发生更改进行监听的监听函数
// $http.onreadystatechange = listener ;
$http.addEventListener( "readystatechange" , listener , false );
4、如果请求方式是POST，则需要设置 请求报头
5、 5、发送请求
$http.send( null );
<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>
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
