商城网站合作协议,网络营销的应用,顺的网站建设多少钱,企业所得税优惠政策2021年小微企业AJAX(Asynchronous JavaScript And XML)#xff1a;异步的 JavaScript 和 XML。本身不是一种新技术#xff0c;而是多个技术综合。用于快速创建动态网页的技术。一般的网页如果需要更新内容#xff0c;必需重新加载个页面。而 AJAX通过浏览器与服务器进行少量数据交换#… AJAX(Asynchronous JavaScript And XML)异步的 JavaScript 和 XML。本身不是一种新技术而是多个技术综合。用于快速创建动态网页的技术。一般的网页如果需要更新内容必需重新加载个页面。而 AJAX通过浏览器与服务器进行少量数据交换就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下对网页的部分内容进行局部更新。 同步异步 同步在客户端向服务器发送请求时用户需要等待服务器的返回结果才能继续 异步在客户端向服务器发送请求时可以做其他的事情。 AJAX介绍 AJAX(Asynchronous JavaScript And XML)异步的 JavaScript 和 XML。 本身不是一种新技术而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下对网页的部分内容进行局部更新。
原生JS实现AJAX
代码实现
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(/userServlet)
public class UserServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的乱码req.setCharacterEncoding(UTF-8);resp.setContentType(text/html;charsetUTF-8);//1.获取请求参数String username req.getParameter(username);//模拟服务器处理请求需要5秒钟/*try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}*///2.判断姓名是否已注册if (zhangsan.equals(username)) {resp.getWriter().write(font colorred用户名已注册/font);} else {resp.getWriter().write(font colorgreen用户名可用/font);}}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
body
form autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册
/form
/body
script//1.为姓名绑定失去焦点事件document.getElementById(username).onblur function () {//2.创建XMLHttpRequest核心对象let xmlHttp new XMLHttpRequest();//3.打开链接let username document.getElementById(username).value;xmlHttp.open(GET, userServlet?username username, true);//xmlHttp.open(GET,userServlet?usernameusername,false);//4.发送请求xmlHttp.send();//5.处理响应xmlHttp.onreadystatechange function () {//判断请求和响应是否成功if (xmlHttp.readyState 4 xmlHttp.status 200) {//将响应的数据显示到span标签document.getElementById(uSpan).innerHTML xmlHttp.responseText;}}}
/script
/html原生JS实现AJAX详解
核心对象XMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下对网页的某部分进行更新。 打开链接open(method,url,async) method请求的类型 GET 或 POST。url请求资源的路径。asynctrue(异步) 或 false(同步)。 发送请求send(String params)
params请求的参数(POST 专用)。
处理响应onreadystatechange readyState0-请求未初始化1-服务器连接已建立2-请求已接收3-请求处理中4-请求已完成且响应已就绪。status200-响应已全部 OK。 获得响应数据形式 responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。 JQuery的GET方式实现AJAX
核心语法$.get(url,[data],[callback],[type]); url请求的资源路径。data发送给服务器端的请求参数格式可以是keyvalue也可以是 js 对象。callback当请求成功后的回调函数可以在函数中编写我们的逻辑代码。type预期的返回数据的类型取值可以是 xml, html, js, json, text等。 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
bodyform autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册/form
/body
script srcjs/jquery-3.3.1.min.js/script
script//1.为用户名绑定失去焦点事件$(#username).blur(function () {let username $(#username).val();//2.jQuery的GET方式实现AJAX$.get(//请求的资源路径userServlet,//请求参数username username,//回调函数function (data) {//将响应的数据显示到span标签$(#uSpan).html(data);},//响应数据形式text);});
/script
/htmlJQuery的POST方式实现AJAX
核心语法$.post(url,[data],[callback],[type]); url请求的资源路径。data发送给服务器端的请求参数格式可以是keyvalue也可以是 js 对象。callback当请求成功后的回调函数可以在函数中编写我们的逻辑代码。type预期的返回数据的类型取值可以是 xml, html, js, json, text等。 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
bodyform autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册/form
/body
script srcjs/jquery-3.3.1.min.js/script
script//1.为用户名绑定失去焦点事件$(#username).blur(function () {let username $(#username).val();//2.jQuery的POST方式实现AJAX$.post(//请求的资源路径userServlet,//请求参数username username,//回调函数function (data) {//将响应的数据显示到span标签$(#uSpan).html(data);},//响应数据形式text);});
/script
/htmlJQuery的通用方式实现AJAX
核心语法$.ajax({name:value,name:value,…}); url请求的资源路径。async是否异步请求true-是false-否 (默认是 true)。data发送到服务器的数据可以是键值对形式也可以是 js 对象形式。type请求方式POST 或 GET (默认是 GET)。dataType预期的返回数据的类型取值可以是 xml, html, js, json, text等。success请求成功时调用的回调函数。error请求失败时调用的回调函数。 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
bodyform autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册/form
/body
script srcjs/jquery-3.3.1.min.js/script
script//1.为用户名绑定失去焦点事件$(#username).blur(function () {let username $(#username).val();//2.jQuery的通用方式实现AJAX$.ajax({//请求资源路径url:userServletxxx,//是否异步async:true,//请求参数data:usernameusername,//请求方式type:POST,//数据形式dataType:text,//请求成功后调用的回调函数success:function (data) {//将响应的数据显示到span标签$(#uSpan).html(data);},//请求失败后调用的回调函数error:function () {alert(操作失败...);}});});
/script
/html
