7 Ajax
简介
AJAX = Asynchronous JavaScript and
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
传统的网页(即不使用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。
使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。
使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
伪造Ajax
1、新建module springmvc-06-ajax,导入web支持,测试项目,是否能成功运行!
2、编写一个 test.html 使用 iframe测试
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>伪造AJAX</title></head><body><script type="text/javascript"> window.onload = function(){ var myDate = new Date(); document.getElementById('currentTime').innerText = myDate.getTime(); }; function LoadPage(){ var targetUrl = document.getElementById('url').value; console.log(targetUrl); document.getElementById("iframePosition").src = targetUrl; }</script><div> <p>请输入要加载的地址:<span id="currentTime"></span></p> <p> <input id="url" type="text" value="https://www.baidu.com/"/> <input type="button" value="提交" onclick="LoadPage()"> </p></div><div> <h3>加载页面位置:</h3> <iframe id="iframePosition" ></iframe></div></body></html>
3、在IDEA中打开浏览器查看效果!
利用AJAX可以做:
- 注册时,检测用户名是否已注册
- 登录时,提示用户名密码错误
- 等等
jQuery.ajax
这里使用jquery来实现ajax;
Ajax的核心是
jQuery 提供多个与 AJAX 有关的方法;
通过jQuery.AJAX方法,可以使用HTTP GET 何HTTP POST从远程服务器上请求文本、HTML、
jQuery 不是生产者,而是大自然搬运工;
jQuery Ajax本质就是
jQuery.ajax(...) 部分参数: url:请求地址 type:请求方式,GET、POST(1.9.0之后用method) headers:请求头 data:要发送的数据 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async:是否异步 timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局) complete:完成之后执行的回调函数(全局) success:成功之后执行的回调函数(全局) error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型 dataType:将服务器端返回的数据转换成指定类型 "
使用 HttpServletResponse 处理,实现简单的测试!
1、配置 web.
2、编写一个AjaxController
package com.zzb.controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@RestControllerpublic class AjaxController { @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("a1:param=>" + name); if("admin".equals(name)){ response.getWriter().print("true"); }else{ response.getWriter().print("false"); } }}
3、编写index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title> <%--导入在线jquery--%> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script> <script> function a(){ $.post({ url:"${pageContext.request.contextPath}/a1", data:{'name':$("#txtName").val()}, success:function (data){ alert(data); } }); } </script> </head> <body> <%--失去焦点触发事件--%> 用户名:<input type="text" id="txtName" onblur="a()"> </body></html>
4、启动tomcat测试
SpringMVC实现
1、实体类
package com.zzb.pojo;public class User { private String name; private int age; private String sex; public User() { } public User(String name, int age, String sex) { this.name = name; this.age = age; this.sex = sex; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } @Override public String toString() { return "User{" + "name='" + name + '\'' + ", age=" + age + ", sex='" + sex + '\'' + '}'; }}
2、Controller类编写
@RequestMapping("/a2") public List<User> a2(){ List<User> userList = new ArrayList<User>(); userList.add(new User("Zzb1号",1,"男")); userList.add(new User("Zzb2号",2,"男")); userList.add(new User("Zzb3号",3,"男")); return userList; // 由于@RestController注解,将list转成json格式返回 }
3、前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script></head><body><input type="button" id="btn" value="获取数据"/><table width="80%" align="center"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"> </tbody></table><script> $("#btn").click(function (){ $.post("${pageContext.request.contextPath}/a2", function (data){ console.log(data) var html = ""; for(var i = 0; i < data.length; ++i){ html+="<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].sex + "</td>" + "</tr>" } $("#content").html(html); }) })</script></body></html>
4、测试
注册提示效果
1、编写Controller类
@RequestMapping("/a3") public String a3(String name){ String msg = ""; // 模拟数据库中存在数据 if(name != null){ if("admin".equals(name)){ msg = "ok"; }else{ msg = "用户名不存在!"; } } return msg; }
2、前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script></head><body><p> 用户名:<input type="text" id="name" onblur="a()"> <span id="userInfo"></span></p><p> 密码:<input type="password" id="pwd" onblur="a()"></p><script> function a(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{'name':$("#name").val()}, success:function (data){ console.log(data); if(data.toString() == "ok"){ $("#userInfo").css("color", "green"); }else{ $("#userInfo").css("color", "red"); } $("#userInfo").html(data); } }); }</script></body></html>
注意:因为传递的是json对象,所以要处理json字符串的乱码问题
<mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <bean > <constructor-arg value="UTF-8"/> </bean> <bean > <property name="objectMapper"> <bean > <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven>
3、测试
获取百度接口Demo
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSONP百度搜索</title> <style> #q{ width: 500px; height: 30px; border:1px solid #ddd; line-height: 30px; display: block; margin: 0 auto; padding: 0 10px; font-size: 14px; } #ul{ width: 520px; list-style: none; margin: 0 auto; padding: 0; border:1px solid #ddd; margin-top: -1px; display: none; } #ul li{ line-height: 30px; padding: 0 10px; } #ul li:hover{ background-color: #f60; color: #fff; } </style> <script> // 2.步骤二 // 定义demo函数 (分析接口、数据) function demo(data){ var Ul = document.getElementById('ul'); var html = ''; // 如果搜索数据存在 把内容添加进去 if (data.s.length) { // 隐藏掉的ul显示出来 Ul.style.display = 'block'; // 搜索到的数据循环追加到li里 for(var i = 0;i<data.s.length;i++){ html += '<li>'+data.s[i]+'</li>'; } // 循环的li写入ul Ul.innerHTML = html; } } // 1.步骤一 window.onload = function(){ // 获取输入框和ul var Q = document.getElementById('q'); // 事件鼠标抬起时候 Q.onkeyup = function(){ // 如果输入框不等于空 if (this.value != '') { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 创建标签 var script = document.createElement('script'); //给定要跨域的地址 赋值给src //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址 //&cb=demo ---》 会返回 demo(data) script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo'; // 将组合好的带src的script标签追加到body里 document.body.appendChild(script); } } } </script></head><body><input type="text" id="q" /><ul id="ul"></ul></body></html>
原文转载:http://www.shaoqun.com/a/506071.html
吴佳:https://www.ikjzd.com/w/1770
克雷格:https://www.ikjzd.com/w/194
7Ajax简介AJAX=AsynchronousJavaScriptandAJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。在2005年,Google通过其GoogleSuggest使AJAX变得流行起来。GoogleSuggest能够自动帮你完成搜索单词。GoogleSuggest使用
mymall:mymall
海豚村:海豚村
亚马逊入驻:亚马逊入驻
亚马逊欧洲站调整单箱限重,超重拒收!!!:亚马逊欧洲站调整单箱限重,超重拒收!!!
要去厦门旅游,求推荐路线?:要去厦门旅游,求推荐路线?
No comments:
Post a Comment