Day24-Ajax

ajax的概述：（异步Javascript和XML）

Asynchronous Javascript And XML
可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页某部分进行更新（局部更新），而传统的网页如果需要更新内容，就需要重载整个网页页面
Ajax = 异步JavaScript和XML，是一种新的思想，整合之前的多种技术，用于快速创建交互式网页应用的网页开发技术。

流程：

异步的请求；（XMLHTTPRequest）
依赖于XMLHTTPRequest对象。在发送请求的时候，原始页面仍然可以使用，不会出现空挡和白板的情况。

学习Ajax的原因：
提升用户体验；
将部分的代码写到客户端浏览器
实现页面的局部刷新

js中的Ajax入门（了解）

步骤：
1）创建xmlHttpRequest对象
创建对象的代码可以在api（W3School）中找到
JavaScript - AJAX - XHR创建对象
2）打开连接
get方式可以在地址后面携带参数
3）发送请求
post方式写请求在里面
4）设置xmlHttpRequest对象状态改变触发的函数

XMLHttpRequest的对象的API
属性：
1）onreadystatechange：（事件）监听该对象的状态的改变。
2）readyState：该属性就记录这个对象的状态。一般情况下，浏览器能够监听到的状态就是状态2和状态4，有时可以监听到状态3（看浏览器而定）,但我们最常用的状态就是状态4；
3）status：状态码。（xmlHttpRequest对象返回后，一般要判定的有两步，首先是readState状态，然后就是状态码是否为200.）
4）responseText:获得字符串形式的响应数据(响应体)。
5）responseXML :获得 XML 形式的响应数据(响应体)

方法：
1）open() ：打开连接。传递三个参数。第一个是请求方式，第二个是请求路径，第三个是否是异步的。第三个默认就是true，可以不写
2）send([post请求的参数]): 发送请求。如果是get方式就可以不用写参数，参数是拼接在了open中的地址栏中。
3）setRequestHeader()：解决POST请求参数的问题。 key和值

一）get请求方式：

<script>function AjaxDemo() {//1.创建xmlHttpRequest对象var xmlHttp = null;if (window.XMLHttpRequest) {// all modern browsersxmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {// for IE5, IE6xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.打开连接xmlHttp.open("GET","${pageContext.request.contextPath}/demo02?username=zs&password=123456");//3.发送请求xmlHttp.send();//4.设置对象状态发生改变所触发的函数xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4 && xmlHttp.status == 200){var result = xmlHttp.responseText;alert(result);}};}</script>

二）post请求方式

<script>function AjaxDemo() {//1.创建xmlHttpRequest对象var xmlHttp = null;if (window.XMLHttpRequest) {// all modern browsersxmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {// for IE5, IE6xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.打开连接xmlHttp.open("POST", "${pageContext.request.contextPath}/demo03");//设置请求参数的mime类型xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//3.发送请求xmlHttp.send("username=zs&password=123456");//4.设置状态发生改变触发的函数,处理结果xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {var result = xmlHttp.responseText;alert(result);}};}

jQuery的Ajax（重点）

使用jQuery之前一定要先引入jQuery文件；

1.1 为什么要使用JQuery的AJAX
在实际的开发通常使用JQuery的Ajax；
因为传统(js里面)的AJAX的开发中，AJAX有两个主要的问题：
1）浏览器的兼容的问题
2）编写AJAX的代码太麻烦而且很多都是雷同的。

1.2JQuery的Ajax的API(重点掌握)

- $.get(路径,   [请求参数]  ,  [回调函数]  ,   数据类型) ; 数据类型：默认是字符串
- $.post(路径,  [请求参数],   回调函数,   数据类型);    数据类型：默认是字符串
- $.getJSON(url ,   请求参数,     回调函数)

      上述请求参数是一个json数据格式的；数据类型默认是字符串类型，可以省略不写。除了请求方式不同之外，$.get()和$.post()方法几乎完全一样，使用方式也一样

getJson的应用场景：
返回数据类型要求是json类型的时候，
跨域问题：这种方法可以解决跨域问题。

案例：校验注册用户输入的用户名是不是已经被注册

大致思路：
1）创建页面
2）给用户名输入框设置失去焦点事件。
创建一个事件，onblue，
创建一个checkUserName()函数响应这个事件
获得用户输入的用户名，
发送Ajax请求（CheckUserNameServlet），
把用户名带过去，）
3）创建CheckUserNameServlet，
在doGet方法中获取Ajax带过来的用户名，
调用UserService层，根据用户名获得User对象，判断User对象是不是为空。
给用户响应

页面代码：

<script type="text/javascript">var $username = $("#username");$username.blur(function(){$.get("${pageContext.request.contextPath}/checkUserName",{"username":this.value},function(result){$("#usernamespan").html("<font color='red'>"+result+"</font>");});})//result表示函数返回的响应体
</script>

servlet中代码：protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//获取请求参数String username = request.getParameter("username");//调用service层进行查询CheckUserNameService  cs = new CheckUserNameService();User user = cs.findUserByName(username);//返回结果if(user != null){response.getWriter().print("用户名已存在！");//这就是页面中result中显示的内容}else{response.getWriter().print("");}} catch (SQLException e) {System.out.println("查询用户名失败");e.printStackTrace();}}

JSON数据格式：

概述:

格式：
json对象：
{ }
- 里面的值以key:value的形式存在,key是字符串
- 如果有多个中间通过,隔开
- value可以是任何合法的数据类型
JSON数组
格式[]
和普通数组格式类似，只不过里面的每个元素是一个json格式的对象

案例：

json生成工具：json-lib
需要导入的jar包比较多，是一个重量级的框架，功能比较全面；
（其他框架：其实Gson和FastJson用的比较多）
共需要导入6个包；

重要api：
JSONObject.fromObject(map或者javabean); 把map或者javabean转成JSON对象{}
JSONArray.fromObject(数组或者list);把数组/或者list转成JSON数组

      @Testpublic void test01(){JSONObject jsonObject = JSONObject.fromObject(new User());System.out.println(jsonObject.toString());}

json-lib:
1）把map或者javabean转成JSON对象，返回时json格式
JSONObject.fromObject
2）List和Array转换成为JSON对象，返回时数组格式，数组中是json
JSONArray.fromObject

案例二：使用JQ和AJAX完成模仿百度提示的效果，返回json数据

思路分析：
- 1）创建数据库和页面
- 给输入框设置键盘抬起事件(keyup),创建一个匿名函数响应这个事件
- 2）在匿名函数里面:
获得用户输入的关键词
发送Ajax请求,把关键词发送到WordServlet
拿到结果,展示页面
- 3）创建WordServlet, 在doGet方法里面:
获得Ajax带过来的请求参数(关键词)
调用业务,根据关键词获得List list
- 4）把list转成Json数组,响应给前端
- 5）编写WordService
- 6）编写WordDao select *from words where word like “%aa%” limit 0,5;

注意要点：
* A.append(B):将B插入到A标签的内部的后面（A标签必须是jQuery对象，而B标签可以是String，Element，jQuery）

页面代码：

      <script>$("#inputId").keyup(function() {var keyword = this.value;var $show = $("#divId");if(keyword == null || keyword == "") {$show.hide();return;}//首先清除原来的数据$show.html("");$.getJSON("${pageContext.request.contextPath}/keyword", {"keyword": keyword}, function(result) {$show.show();$(result).each(function(index,element){$show.append("<tr><td>"+element.word+"</td></tr>");});});});</script>

servlet代码：

     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String keyword = request.getParameter("keyword");//调用service层KeywordService ks = new KeywordService();List<Keyword> list = ks.findKeyword(keyword);JSONArray jsonArray = JSONArray.fromObject(list);//System.out.println(jsonArray.toString());//返回结果response.getWriter().print(jsonArray);} catch (SQLException e) {System.out.println("数据库查询关键字失败");e.printStackTrace();}}

Day24-Ajax相关推荐

ajax用户登录注册
首先在服务器环境下运行,访问php接口调用封装好的Ajax方法本·文路径尚存有问题前端js操作代码: <body> <div class="form"> ...
html+spring boot简单的ajax数据传输实现
本篇讲解在前后端不分离情况下的html+spring boot的项目数据传输实现首先,后台我写了三个接口 package com.demo.ajax.controller;import com.de ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
使用ajax不刷新页面获取、操作数据
在使用jsp或html时,利用ajax达到不刷新页面就可以获取.操作数据. 首先上代码 (html+js) 在此处需要引入jquery插件  < ...
Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【AJAX】Ajax学习总结
AJAX是什么: 是Asynchronous(异步).JavaScript.And.Xml 的缩写主要就是说: 通过JavaScript融合了Web开发标准表示技术,DOM动态显示和交互,XML和X ...
SpringMVC——通俗易懂讲讲Ajax~
聊聊Ajax 一.什么是Ajax 二.iframe标签简单伪造Ajax 三.Ajax的实现 1. 基本概念的了解 Ajax的核心是什么? XMLHttpRequest是什么? Ajax数据传输的数据格 ...
[JAVA EE]ajax 方式提交数据
前端界面:Form表单前端数据提交:使用 ajax 方式 ( 基于jquery ) 后台代码: TestController.java @Controller public class TestCo ...
ajax交互扩展遇到的问题,ajax autocomplete扩展程序无法正常工作
我在文本框上有一个自动填充扩展器,它将记录显示为数据库中的列表,但是我点击了texbox并开始输入任何内容.我的HTML代码是 Enabled="True" TargetContr ...