深圳搭建p2p网站,做视频解析网站,福州企业宣传片制作公司,室内装修公司招聘信息一、JavaWeb中路径的说明
1. JavaWeb中的路径
在JavaWeb中, 路径分为相对路劲和绝对路径两种:
相对路径: ./ 表示当前目录 ../ 表示当前文件所在目录的上一级目录
绝对路径: 完整的路径名
2. 在JavaWeb中/的不同意义
/斜杠如果被浏览器解析,得到的是
协议本地ip端口号…一、JavaWeb中路径的说明
1. JavaWeb中的路径
在JavaWeb中, 路径分为相对路劲和绝对路径两种:
相对路径: ./ 表示当前目录 ../ 表示当前文件所在目录的上一级目录
绝对路径: 完整的路径名
2. 在JavaWeb中/的不同意义
/斜杠如果被浏览器解析,得到的是
协议本地ip端口号
http://ip:port/
/斜杠如果被服务器解析, 得到是
协议本地ip端口号项目路径
http://ip:port/工程路径/ 特殊情况response.sendRedirect(“”)服务器不解析,把斜杆发给浏览器去解析得到http://ip:port/
二、AJAX
1. 之前浏览器和服务器交互的请求发送方式
浏览器和服务器进行数据交互的基本流程为 http://localhost:8080/Ajax_war_exploded/PathServlet
1.浏览器发起http请求
2.服务器收到请求,对请求进行解析,创建请求和响应对象
3.服务器根据请求解析结果调用对应的资源处理请求
4.服务器将处理结果响应给浏览器
5.浏览器收到响应结果,对结果数据进行解析
6.浏览器将解析后的数据展示在页面 浏览器发送请求的方式:
1.在浏览器地址栏输入url地址后回车
2.使用超链接
3.使用form表单
4.在js代码中使用window.location.href(在当前页面打开,window可以省略)
5.在js代码中使用windows.open()(在新标签打开,window可以省略)
2.浏览器发送请求访问服务器方式存在的问题
新的响应结果会覆盖之前的内容
3. Ajax的介绍和使用
3.1 介绍
概念
Ajax(Asynchronous Javascript And XML)是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。
作用
实现了在当前网页中显示新的响应内容。不会覆盖掉原有内容
特点 一种新的让浏览器发起http请求的技术 使用ajax发起的请求响应结果不会自动的覆盖原有内容而是可以在原有页面内容上继续显示 Ajax是一门基于JavaScript的技术由浏览器解析运行所以是一种前端客户端技术 简单易用 3.2 ajax发送请求
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--传统请求:1.地址栏发起请求2.超链接发起请求3.location.href发起请求4.form发起请求5.window.open()方法(是在新标签页打开)缺点: 发起请求后,响应回来的内容覆盖原有的页面简单理解: document对象直接发起的请求, 响应回来什么内容,页面就会显示什么内容ajax请求:页面不变的情况下,发送请求,获取响应数据,将响应数据完成局部刷新ajax属于js的技术简单理解:xhr对象发起请求,页面不变--scriptfunction f() {//1.创建xhr对象var xhr new XMLHttpRequest();//2.开启连接xhr.open(get,AServlet);//3.发起请求xhr.send();//4.监听readyState(状态码)的变化事件//,一旦readyState发生变化,启动函数执行xhr.onreadystatechange function () {/** readyState:* 0:创建了xhr对象,还没有连接* 1:建立了连接,还没有发送请求* 2:发送了请求,服务端开始处理* 3:服务器响应,但没有响应完(通常仅完成了响应头中数据的处理)* 4:服务器完成了完整的响应* *///readyState为4服务端完整响应。 响应状态码为200成功响应。if (xhr.readyState 4 xhr.status 200){//xhr.responseText(响应回来的文本)console.log(xhr.responseText);document.getElementById(sp).innerText xhr.responseText;}}}/script
/head
body
h3ajax01.html/h3
button onclickf()请求/button
br
span idsp/span
/body
/html
定义一个方法:
1.创建ajax请求对象
var xhr new XMLHttpRequset()
2.开启连接
请求方式,请求路径
xhr.open(get,testServlet)
3.发起请求
xhr.send()
4.监听就绪状态码的变化
xhr.onreadystatechange function(ev){ if (xhr.readyState 4 xhr.status 200){ //获取响应数据 var responseText xhr.responseText }
}
4. 同步与异步请求
同步请求 发送请求后一直等待服务端的响应获取到服务端响应后再执行其他的逻辑代码。 浏览器直接发起 在浏览器地址栏输入url发起请求 使用超链接发起请求 使用form表单发起请求 在js代码中使用window.location.href发起请求 ajax发起同步请求有xhr对象发起请求 ajax与其他方式发送同步请求的区别: ajax可以局部刷新(由xhr对象发送请求)其他的请求方式会刷新整张页面
异步请求 发送请求后不需要等待服务端的响应继续按照顺序执行其他逻辑代码监听到响应自动调用指定的方法。
5. Ajax的同步和异步设置
Ajax执行步骤 创建Ajax请求对象 建立连接 发送连接 监听状态变化及结果处理
设置ajax的同步异步
通过设置Ajax请求对象open方法的async参数的值
true表示异步默认值
false表示同步
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescriptfunction f() {location.href CServlet;}//ajax发起同步请求function f1() {var xhr new XMLHttpRequest();//默认是true,异步请求xhr.open(get,CServlet,false);xhr.send();var responseText1 xhr.responseText;console.log(同步请求)console.log(responseText1);}//ajax发起异步请求function f2() {var xhr new XMLHttpRequest();//默认是true,异步请求xhr.open(get,CServlet);xhr.send();//监听xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200){var responseText2 xhr.responseText;console.log(responseText2);}}console.log(异步请求);}/script
/head
body
!--同步请求: 浏览器发送请求之后,一直等待服务器的响应,服务器响应完成后,才继续向下执行比如:1.地址栏直接发起的请求2.超链接发起请求3.form表单发起请求4.location.href发起请求ajax也可以发送同步请求: 但是页面不变,局部刷新异步请求: 浏览器发送请求后,不需要等待服务器的响应,继续执行其他代码,服务器响应后会有结果可以是函数的执行
--
a hrefCServlet超链接/a
hr
form actionCServletinput typesubmit
/form
hr
button onclickf()location.href/button
hr
a hrefjavascript:void(0) onclickf1()ajax同步请求/a
hr
a hrefjavascript:void(0) onclickf2()ajax异步请求/a
/body
/html
6. Ajax的get请求和post请求及请求参数
6.1 Ajax设置get请求方式及携带请求参数
Ajax的get请求的请求参数是直接写在请求路径后面
使用?拼接,多个参数中间使用隔开
HelloServlet?namelucyage18
6.2 Ajax设置post请求方式及携带请求参数
Ajax的post请求传递参数是需要单独写在send方法中而且需要设置请求头该请求头表示此次请求是以表单的方式提交 //请求方式是post请求则需要设置请求头这个请求头就表示是以表单方式提交数据 xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); xhr.send(namelilyage15);
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescriptfunction f1() {//get方法传递参数var xhr new XMLHttpRequest();xhr.open(get,DServlet?unamezspwd123);xhr.send();xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200){var text xhr.responseText;console.log(text);}}}function f2() {//post方法传递参数var xhr new XMLHttpRequest();xhr.open(post,DServlet);//必须设置请求头xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)xhr.send(unamewwpwd456);xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200){var text xhr.responseText;console.log(text);}}}/script
/head
body
body
button onclickf1()get请求及传参/button
br
button onclickf2()post请求及传参/button
br
form actionaa methodpostinput typesubmit
/form
/body
/body
/html
7. Ajax请求的响应数据格式及处理重点
使用json数据格式特殊格式的字符串, 和js对象格式一致它比较方便简单而且也有好用的json工具包。json格式在浏览器可以直接解析成对象格式
Java对象的json字符串格式 普通Java对象的json字符串格式 User user new User(1, 张三丰, 18, 北京);
{id:1, name:张三丰, age: 18, address:北京} Map集合对应的json字符串格式 MapString, Object map new HashMap();
map.put(key1, value1);
map.put(key2, value2);
{key1:value1, key2:value2} List集合对应的json字符串格式 ListUser list new ArrayList();
list.add(new User(1, 赵敏, 18, 北京));
list.add(new User(2, 周芷若, 28, 上海));
[{id:1, name:赵敏, age:18, address:北京},{id:2, name:周芷若, age:28, address:上海}
]
Ajax获取响应数据的方式var 变量名 xhr.responseText; 获取到的是普通字符串数据直接使用 获取到的是json格式的字符串使用js的eval()函数将json格式的字符串转换为js对象
三、 jQuery封装的Ajax的使用 第一种 $.ajax({type:“请求方式”,url:“请求地址”data:“请求参数”dataType:服务器返回的数据类型success:fundction(data){ //成功且完整响应自动调用的函数},error: function(){ //出现错误自动调用的函数}
}) dataType用来指定服务器返回来的数据类型可选值有如下 xml表示服务器返回的是xml内容 html表示服务器返回的是html文本内容 script表示服务器返回的是script文本内容 json表示服务器返回的是json内容重点 jsonp表示使用jsonp形式调用函数早期我们用它来解决跨域问题 text表示服务器返回的是纯文本字符串 第二种 $.get(“请求地址”“请求参数”回调函数, 返回的数据类型) $.post(“请求地址”“请求参数”回调函数, 返回的数据类型)
回调函数主要是用来处理服务器对我们的响应结果。
返回的数据类型这个参数用来设置服务器返回来的数据类型可以是xml, html, script, json, text。 第三种 $.getJSON(请求地址, 请求参数, 回调函数)
这种方式要求服务器返回的数据类型得是json格式的。 第四种 $.getScript(请求地址, 回调函数) 这种方式是发送ajax请求获取一个js文件。
