一诺网站建设,云南省建设造价协会网站,我想找工作没学历,一流高职院校建设网站Ajax简介和使用
1.简介 AJAX Asynchronous JavaScript and XML#xff08;异步的 JavaScript 和 XML#xff09;。 AJAX 是一种在无需重新加载整个网页的情况下#xff0c;能够更新部分网页的技术。 Ajax 不是一种新的编程语言#xff0c;而是一种用于创建更好更快以及…Ajax简介和使用
1.简介 AJAX Asynchronous JavaScript and XML异步的 JavaScript 和 XML。 AJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。 Ajax 不是一种新的编程语言而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 在 2005 年Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面当您在谷歌的搜索框输入关键字时JavaScript 会把这些字符发送到服务器然后服务器会返回一个搜索建议的列表。 就和国内百度的搜索框一样! 传统的网页(即不用ajax技术的网页)想要更新内容或者提交一个表单都需要重新加载整个网页。 使用ajax技术的网页通过在后台服务器进行少量的数据交换就可以实现异步局部更新。 使用Ajax用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery 不是生产者而是大自然搬运工。
jQuery Ajax本质就是 XMLHttpRequest对他进行了封装方便调用
jQuery.ajax(...)部分参数url请求地址type请求方式GET、POST1.9.0之后用methodheaders请求头data要发送的数据contentType即将发送信息至服务器的内容编码类型(默认: application/x-www-form-urlencoded; charsetUTF-8)async是否异步timeout设置请求超时时间毫秒beforeSend发送请求前执行的函数(全局)complete完成之后执行的回调函数(全局)success成功之后执行的回调函数(全局)error失败之后执行的回调函数(全局)accepts通过请求头发送给服务器告诉服务器当前客户端可接受的数据类型dataType将服务器端返回的数据转换成指定类型xml: 将服务器端返回的内容转换成xml格式text: 将服务器端返回的内容转换成普通文本格式html: 将服务器端返回的内容转换成普通文本格式在插入DOM中时如果包含JavaScript标签则会尝试去执行。script: 尝试将返回值当作JavaScript去执行然后再将服务器端返回的内容转换成普通文本格式json: 将服务器端返回的内容转换成相应的JavaScript对象jsonp: JSONP 格式使用 JSONP 形式调用函数时如 myurl?callback? jQuery 将自动替换 ? 为正确的函数名以执行回调函数jQuery官网:jQuery
可去下载jQuery文件
2.Ajax初体验
简单实现一个鼠标移出输入框后的请求
jsp
%--Created by IntelliJ IDEA.User: 19401Date: 2023/3/9Time: 14:48To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
htmlheadtitle$Title$/titlescript src${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js/scriptscriptfunction a1() {$.post({url:${pageContext.request.contextPath}/a1,data:{name:$(#username).val()},success:function (data,status) {alert(data);alert(status);}});}/script/headbody用户名: input typetext idusername οnblura1()/body
/html
Controller
RequestMapping(/a1)public void a1(String name, HttpServletResponse httpServletResponse) throws IOException {if (sangyu.equals(name)){httpServletResponse.getWriter().print(true);}else {httpServletResponse.getWriter().print(false);}}3.体验Ajax
我们再测试一个小Demo思考一下我们平时注册时候输入框后面的实时提示怎么做到的
jsp
%--Created by IntelliJ IDEA.User: 19401Date: 2023/3/10Time: 11:19To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleTitle/titlescript src${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js/scriptscriptfunction a1() {$.post({url:${pageContext.request.contextPath}/a3,data:{name:$(#name).val()},success:function (data) {if (data.toString() OK){$(#userInfo).css(color,green);}else {$(#userInfo).css(color,red);}$(#userInfo).html(data);}});}function a2() {$.post({url:${pageContext.request.contextPath}/a3,data:{pwd:$(#pwd).val()},success:function (data) {if (data.toString() OK){$(#pwdInfo).css(color,green);}else {$(#pwdInfo).css(color,red);}$(#pwdInfo).html(data);}});}/script/head
body用户名: input typetext idname οnblura1()
span iduserInfo/span
p/p密码: input typetext idpwd οnblura2()span idpwdInfo/span
/body
/html
controller
RequestMapping(/a3)public String a3(String name,String pwd){String msg ;if (name ! null){if (sangyu.equals(name)){msg OK;}else {msg 用户名输入有误;}}if (pwd ! null){if (sangyu.equals(pwd)){msg OK;}else {msg 密码输入有误;}}return msg;}【记得处理json乱码问题】
测试一下效果动态请求响应局部刷新就是如此
