黑马程序员技术交流社区

标题: Java之AJAX概念和实现方式 [打印本页]

作者: 梦缠绕的时候 时间: 2019-6-27 10:48
标题: Java之AJAX概念和实现方式
1．概念：
Asynchronous JavaScript And XML 异步的JavaScript和XML
1.异步和同步：客户端和服务端相互通信的基础上

   同步:  *客户端必须等待服务端的响应。在等待的期间客户端不能做其他操作。
   异步:  *客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以做其他操作。

   Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

   通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，
   对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须需重新整个网页页面。

提升用户的体验

2、实现方式：
1.原生的js实现方式
//定义方法

function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
//如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*
   参数： 1.请求方法：GET、POST
   * get方式，请求参数在URL后边拼接。send方式为空参
   * post方式，请求参数在send方法中定义
         2.请求的URL:
         3.同步或异步请求:true(异步)或false(同步)


   */
xmlhttp.open("GET","/BorrowAndInvest/servlet/LoginServlet?username=tom", true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式：xmlhttp.responseText;
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象就绪状态改变时,触发事件onreadystatechange.
xmlhttp.onreadystatechange = function() {
   //判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
      //获取服务器的响应结果
var responseText= xmlhttp.responseText;
alert(responseText);
}
}
}

2.Jquery实现方式

1.$.ajax()
   *语法:$.ajax({键值对})；
//定义方法

  function fun() {
//使用$.ajax()发送异步请求
$.ajax({
   url:"/BorrowAndInvest/servlet/LoginServlet",//请求路径
   type:"POST",//请求方式
   //data:"username=hello&age=25",//请求参数
   data:{"username":"hello","age":25},
   success:function(data){
         alert(data);
   },//响应成功后的回调函数
   error:function(){
   alert("出错啦");
   },//表示如果请求响应出现错误，会执行的回调函数
   dataType:"text"//设置接收到的响应数据的格式
});

2.$.get()：发送get请求
*语法:$.get(url,[data],[callback],[type])
*参数：1.url:请求路径2.data:请求参数3.callback回调函数4.type:响应结果的类型

  function fun() {
$.get("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){
            alert(data);
},"text");
}

3.$.post()发送post请求*
function fun() {
$.post("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){
            alert(data);
},"text");
}

---------------------

原文：https://blog.csdn.net/weixin_44538423/article/details/91608124

作者: 梦缠绕的时候 时间: 2019-6-27 10:48
有任何问题欢迎在评论区留言

作者: 梦缠绕的时候 时间: 2019-6-27 10:48
或者联系学姐DKA-2018

作者: 晨大喵 时间: 2019-7-17 11:50

感谢分享~~

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2