2021-01-06

7 Ajax

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中打开浏览器查看效果！

image-20210106135930189

利用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测试

image-20210106191523577

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、测试

image-20210106193750816

注册提示效果

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、测试

image-20210106195420085

image-20210106195432238

获取百度接口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/

吴佳：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
海豚村：海豚村
亚马逊入驻：亚马逊入驻
亚马逊欧洲站调整单箱限重，超重拒收！！！：亚马逊欧洲站调整单箱限重，超重拒收！！！
要去厦门旅游，求推荐路线？：要去厦门旅游，求推荐路线？
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)