AJAX

最新推荐文章于 2024-03-28 21:21:23 发布

武侠㿝卄清

最新推荐文章于 2024-03-28 21:21:23 发布

阅读量300

点赞数

分类专栏： java web开发编程语言文章标签： ajax

本文链接：https://blog.csdn.net/qq_30347133/article/details/84069168

版权

web开发同时被 3 个专栏收录

611 篇文章 2 订阅

订阅专栏

java

574 篇文章 4 订阅

订阅专栏

编程语言

272 篇文章 1 订阅

订阅专栏

AJAX
第一章原生js的AJAX应用
1-1传统请求的缺点
如果我们仅仅只是需要更新系统中的某一小块内容,按照我们传统的形式是将请求发送到服务器取得最新的数据,服务器为我们的浏览器做出响应,我们的浏览器中的所有的内容都需要一起刷新一次.
传统的请求方式也叫做全局刷新.
现在我们急需局部刷新的技术来完成以上操作.
在这里插入图片描述

1-2 AJAX技术应用带来的好处
ajax是基于JavaScript语言扩展出来的局部刷新的技术
ajax能够将请求发送到后台(servlet),然后从后台(servlet)取得数据,并且做的是局部刷新的操作.
1-3 原生js的AJAX实现步骤
在这里插入图片描述

在这里插入图片描述

1-4 ajax的同步和异步操作

1-5 ajax以get请求方式传递参数

1-6 ajax以post请求方式传递参数
注意：post请求需要加上
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

1-7使用ajax中避免浏览器缓存的方式
（1）随机数方式：
在这里插入图片描述

（2）时间戳方式：

在这里插入图片描述

第二章JQuery支持的AJAX
2-1 $.ajax方式
$.ajax({
//type:“post”,
url : “myServlet1.do”,
dataType : “text”,
data : “username=张三&password=123”,
success : function(data) {
document.getElementById(“xs”).innerHTML=data;
},
error : function() {
alert(“服务器崩溃了”);
}
});
2-2 $. g e t 方式和$ .post方式
$.get(
“myServlet1.do”,
{“username”:“lisi”,“password”:“234”},
//“username=zs&password=123”,
function(data) {
document.getElementById(“xs”).innerHTML=data;
},
“text”
);
2-3 实战：通过ajax请求验证账号是否存在

第三章 JSON

{“key1”:”value1”,”key2”:”value2”}
{key1:”value1”,num1:100}
在实际项目开发中
key:建议加上双引号
value:普通文本必须加双引号,数值不用加双引号
{“str1”:”abc”,”num1”:100}

3-1 ajax以json格式传递参数
传递参数,我们以传统的形式或者是json的形式传递都可以,未来实际项目开发中都会经常用到.

3-2 ajax以json格式接收返回值（json的拼接）
（1）接收单个值
（2）接收多个值
（3）接收单个对象
（4）接收多个对象
（5）接收集合

3-3 实战：省市联动

一对多,一个省份里面包含多个城市
一个城市只能从属于一个省份

省份是一
城市是多

我们习惯于使用外键来建立表与表之间的关系
面试时问你这两张表是由哪张表来维护关系,就是问你在哪张表上建立外键

以下两张表,由城市表来维护关系.

永远是在多的一方建立外键
换句话说,永远是由多的一方来维护关系

省份表 province
id name
1 辽宁
2 吉林
3 黑龙江

城市表 city
id name pid
1 沈阳 1
2 大连 1
3 本溪 1
4 长春 2
5 齐齐哈尔 3

3-4$.getJSON的使用

第四章ajax的跨域操作
4-1 什么是跨域操作
对于我们ajax以前的访问后台的路径,都是访问的是自己项目的后台
以前的路径
在这里插入图片描述
观察以上访问路径,其中的3个元素
协议ip端口号改变其中一种,就是跨域操作
http://192.168.1.2:8088/ajax2/myServlet1.do

也就是说,我们以前传统的操作,发出的请求都是从自己的后台取数据,跨域操作指的就是,发出请求到别人家的后台去取数据.

4-2 跨域操作案例
天气预报

4-3 实际项目开发中跨域的应用
我们现在创建的包结构来为类做划分,方便管理
比如
util包
domain包
servlet包

我们以后做分布式开发(dubbo+zookeeper)
需要我们的项目是一种聚合结构
我们做的是为包划分项目结构
util项目
domain项目
servlet项目

在这里插入图片描述

1.过滤器Filter属于Servlet规范中的一员，过滤器在开发中的作用是什么*
1.过滤字符编码
2.拦截请求

2.过滤器Filter可以在目标程序之前以及之后都可以加入过滤代码*

目标程序可以理解为目标servlet 比如执行过滤器链的操作，先执行过滤器1234，再执行目标servlet，再返回来4321

3.怎么写一个过滤器*

package com.wkcto.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
public class Filter1 implements Filter {

 @Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
		throws IOException, ServletException {
    System.out.println("这是filter1入口");
    req.setCharacterEncoding("utf-8");
    resp.setContentType("text/html;charset=utf-8");
    chain.doFilter(req, resp);//执行放行了动作
	System.out.println("响应回来了又经过了myServlet");
}

}
注意过滤器在XML配置url-pattern和服务器一样

4.能够独立编写登录验证的过滤器以及字符集过滤器*

能
不能

5.过滤器的方法包括：init、doFilter、destroy，其中doFilter为过滤器核心方法*

用chain调用doFilter方法执行放行操作

6.过滤器的生命周期是怎样的？*

对应启动服务器与关闭服务器

7.在过滤器的doFilter方法当中使用chain.doFilter(request,response)来继续执行下一个目标程序*

这操作叫放行

8.通过FilterConfig在web.xml文件中可以给过滤器传值*

可以传4种url-pattern植 /abc/myServlet1.do , /abc/* , /* , *.do

9.过滤器的url-pattern通常采用通配符的方式配置*

理解  过滤器其实是一种先拦截再放行的过程，  url-pattern和服务器的一样可以达到拦截， 执行chain.doFilter（req,resp）可以达到放行，这样就可以访问到后台了。

10.符合同一匹配规则路径的多个Filter，它们的执行优先级是怎样的*

xml配置自上而下执行

11.监听器Listener也属于Servlet规范中的一员。*

知道

12.怎么写一个监听器，实现步骤*

package com.wkcto.listener;

import javax.servlet.http.HttpSessionEvent;
import javax.servlet.http.HttpSessionListener;

public class Listener1 implements HttpSessionListener {

      @Override
    public void sessionCreated(HttpSessionEvent event) {
     System.out.println("session创建了");
    	 
    }
      
      @Override
    public void sessionDestroyed(HttpSessionEvent even) {
    	  System.out.println("session销毁了");
    
    }

}
第二步骤：在xml中加上 com.wkcto.listener.Listener1配置
第三部，新建一个jsp文件测试，在浏览器段输入jsp地址

13.Servlet规范中提供了哪些常见的监听器（创建与销毁时间）。*

             ServletContextListener :开启服务器与关闭服务器 对应 创建与销毁   


	ServletRequestListener  ：在浏览器端输入地址敲回车发生请求的时候创建（也就是说当请求发送到项目），服务器响应的时候销毁
                通过转发操作可以延长它的寿命。



	 HttpSessionListener：并不是执行代码request.get session的时候创建，在jsp中，而是在浏览器发生请求的时候就创建了。
	 关闭服务器的时候session对象销毁，关闭
	 浏览器的时候不销毁，jssionID会销毁，此时会话失效，session对象并没有销毁     在jsp 中执行session.invalidate()

               的方法的时候session对象销毁。

14.ServletContextListener当中的方法什么时候执行*

开启服务器和关闭服务器。

15.HttpSessionListener当中的方法什么时候执行*

 public void sessionCreated(HttpSessionEvent event)   在浏览器发生请求的时候就执行了。

   public void sessionDestroyed(HttpSessionEvent even) 执行session.invalidate()时候执行此方法

16.ajax 啊假克斯是一门局部刷新的技术。在实际开发中的步骤为：

                        1.创建核心对象
 
		      xmlhttp:new XMLHttpRequest()
			实现ajax技术的核心对象,所有的ajax的属性和方法的调用都是由该对象发起
	 
	            var xmlhttp;
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	
	//2.创建回调函数
	/*
		xmlhttp.onreadystatechange:
			创建ajax的回调函数,ajax的回调函数指的是我的请求先发送到后台,先执行后台代码,再执行函数体的内容
	*/
	xmlhttp.onreadystatechange = function() {
		/*
			if:回调函数的执行条件
			xmlhttp.readyState:请求的状态码 码值为4 表示请求成功
			xmlhttp.status:响应的状态码 码值为200 表示响应成功
			
			综上所述,回调函数的执行条件为 当请求成功并且响应成功的基础上,我们才能够执行回调函数的函数体
			
		*/
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			//xmlhttp.responseText:表示接受后台以响应流的形式传递回来的返回值
			var data = xmlhttp.responseText;
			document.getElementById("msg").innerHTML = data;
		}
	}
	
	
	//3.设置请求信息
	/*
		xmlhttp.open:设置请求的基本信息
			参数1:请求方式 GET/POST
			参数2:请求路径
			参数3:设置请求是同步还是异步
				
				true:异步
					我们上面的ajax代码和下面的alert代码分别独立的执行
					在执行ajax的过程中(睡觉),没有影响到alert弹框
					alert弹框后,也没有影响到ajax的执行
					全程为两根线程,一根负责执行ajax,一根负责执行alert
					彼此之间互不影响
					
					
				false:同步
					传统的执行模式,下面的代码(alert)必须等待上面的代码(ajax)执行完毕之后才能执行
					代码按照上下的顺序依次执行
					全程一根线程,按照上下顺序执行
				
				未来我们的实际项目开发,使用异步操作会大大的增加我们的用户体验,
				但是在遇到特殊需求的时候,也会使用到同步操作
			
			
	*/
	xmlhttp.open("GET", "myServlet1.do?str1=aaa&str2=bbb&str3="+new Date().getTime(), false);
	
	//以下代码为post传递参数必加的代码,位置在open和send方法中间
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	//4.发送请求
	//xmlhttp.send:发送请求
	xmlhttp.send("str1=ccc&str2=ddd");



                  设置请求实际上传递的是2个参数，加上这个参数str3="+new Date().getTime()是解决浏览器出现缓存问题用的
	      浏览器缓存的弊端是，我们访问的数据不是最新的数据，优点是，访问速度快。

- - 如果servlet接收的请求为传统的全局刷新的请求,那么我们以下的响应流就是为浏览器响应回数据(html代码)
  - 如果servlet接收的请求为使用ajax技术发送的局部刷新的请求,那么我们以下的响应流就是为ajax提供返回值
  - ```
   										out.print的内容就是返回值
```

1.使用AJAX发送异步请求有什么好处*

知道
不知道

2.AJAX是如何实现可以发送异步请求的，它的原理是什么*

理解
不理解

3.什么是同步请求，什么是异步请求*

理解
不理解

4.实现AJAX异步请求的核心对象是：XMLHttpRequest*

知道
不知道

5.会编写代码发送ajax get和post请求*

会
不会

6.在什么情况下，AJAX的异步请求必须设置为同步请求*

知道
不知道

7.能够使用jQuery的 $. a j a x (),$ .get(),$.post()发送请求*

能
不能

8.能够使用jQuery的$.getJSON()*

能
不能

9.能够使用jQuery解决AJAX跨域问题*

能
不能

10.能够使用jQuery AJAX实现省市联动效果*

能
不能

前段给后端传的是查询条件，后端给前段反馈的是查询结果

武侠㿝卄清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX

AJAX第一章原生js的AJAX应用1-1传统请求的缺点如果我们仅仅只是需要更新系统中的某一小块内容,按照我们传统的形式是将请求发送到服务器取得最新的数据,服务器为我们的浏览器做出响应,我们的浏览器中的所有的内容都需要一起刷新一次.传统的请求方式也叫做全局刷新.现在我们急需局部刷新的技术来完成以上操作.1-2 AJAX技术应用带来的好处ajax是基于JavaScript语言扩展出...
复制链接

扫一扫

专栏目录