AJAX

1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML

   1. 异步和同步：客户端和服务器端相互通信的基础上
       * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
       * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

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

提升用户的体验

实现方式：
1. 原生的JS实现方式（了解）

01-原生js实现ajax.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//定义方法function  fun() {//发送异步请求//1.创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立连接/*参数：1. 请求方式：GET、POST* get方式，请求参数在URL后边拼接。send方法为空参* post方式，请求参数在send方法中定义2. 请求的URL：3. 同步或异步请求：true（异步）或 false（同步）*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3.发送请求xmlhttp.send();//4.接受并处理来自服务器的响应结果//获取方式 ：xmlhttp.responseText//什么时候获取？当服务器响应成功后再获取//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。xmlhttp.onreadystatechange=function(){//判断readyState就绪状态是否为4，判断status响应状态码是否为200if (xmlhttp.readyState==4 && xmlhttp.status==200){//获取服务器的响应结果var responseText = xmlhttp.responseText;alert(responseText);}}}</script></head>
<body><input type="button" value="发送异步请求" onclick="fun();"><input>
</body>
</html>

AjaxServlet.java

package cn.itcast.web.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取请求参数String username = request.getParameter("username");//处理业务逻辑。耗时try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}//2.打印usernameSystem.out.println(username);//3.响应response.getWriter().write("hello : " + username);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

JQeury实现方式

02-JQuery实现方式1_ajax.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.min.js"></script><script>//定义方法function  fun() {//使用$.ajax()发送异步请求$.ajax({url:"ajaxServlet" , // 请求路径type:"POST" , //请求方式//data: "username=jack&age=23",//请求参数data:{"username":"jack","age":23},success:function (data) {alert(data);},//响应成功后的回调函数error:function () {alert("出错啦...")},//表示如果请求响应出现错误，会执行的回调函数dataType:"text"//设置接受到的响应数据的格式});}</script></head>
<body><input type="button" value="发送异步请求" onclick="fun();"><input>
</body>
</html>

AjaxServlet.java


package cn.itcast.web.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取请求参数String username = request.getParameter("username");//处理业务逻辑。耗时try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}//2.打印usernameSystem.out.println(username);//3.响应response.getWriter().write("hello hhhh : " + username);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

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

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

03-JQuery实现方式2_get.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.min.js"></script><script>//定义方法function  fun() {$.get("ajaxServlet",{username:"rose"},function (data) {alert(data);},"text");}</script></head>
<body><input type="button" value="发送异步请求" onclick="fun();"><input>
</body>
</html>

04-JQuery实现方式3_post.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.min.js"></script><script>//定义方法function  fun() {$.post("ajaxServlet",{username:"rose"},function (data) {alert(data);},"text");}</script></head>
<body><input type="button" value="发送异步请求" onclick="fun();"><input>
</body>
</html>

AJAX ||JQeury实现方式||原生的JS实现方式（了解）相关推荐

原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
Ajax和JSON-学习笔记02【JQuery方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
Ajax的异步同步原理以及js几种方式的实现
Ajax的异步同步原理以及js几种方式的实现的个人详细解析 Ajax简介 Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML ...
Ajax入门笔记（原生Ajax、jQuery、axios、fetch、跨域SONP、CORS）
文章目录一.基础知识 1.1AJAX简介 1.2 AJAX的特点 1.2.1 AJAX 的优点 1.2.2 AJAX 的缺点 1.3 XML简介 1.4 HTTP简介 1.4.1 请求报文 1.4. ...
Node.js 系列：构建原生 Node.js 应用
原生 Node.js 应用 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效 Nod ...
html5支持原生js,HTML5怎么学原生的js？让你对前端有了新的认识
原标题:HTML5怎么学原生的js?让你对前端有了新的认识已经学习了HTML5两个月,第一个月主要学习HTML和CSS,第二个月学完了原生的js,学完原生的js后对前端有了新的认识,了解了前端并不是 ...
ajax登录验证的原理,ajax用户登录验证-get和post提交方式，与工作原理—2018-8-15...
ajax用户登录验证: 实例 html> Ajax实战:表单验证用户登录邮箱: 密码: 提交 let btn = document.getElementsByTagName('button' ...
html用ajax做三级联动,怎样使用JS+AJAX做出三级联动
这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择省/ ...
JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)，JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...

AJAX ||JQeury实现方式||原生的JS实现方式（了解）

AJAX

01-原生js实现ajax.html

AjaxServlet.java

JQeury实现方式

02-JQuery实现方式1_ajax.html

AjaxServlet.java

03-JQuery实现方式2_get.html

04-JQuery实现方式3_post.html

AJAX ||JQeury实现方式||原生的JS实现方式（了解）相关推荐

最新文章

热门文章