JavaWeb复习09、10
CH09 jQuery
Ajax进阶
三种数据表示形式
1
2
3
4
5
6
7
8
|
this.username = req.getParameter("username");
resp.setContentType("text/plain");
PrintWriter out = resp.getWriter();
if(isExit(username)){
out.print("exit");
}else out.print("No");
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var responseText = xhr.responseText;
if(responseText=="No"){
isUsernameValid=true;
if(checkPasswordValid())
{
tips.innerHTML = '';
tips.innerHTML += '<h4 style="line-height:25px ;">欢迎注册!</h4>';
console.log("检查用户名重复");
}
}else{
isUsernameValid=false;
tips.innerHTML='';
tips.innerHTML+='<h4 style="line-height:25px ;color: red;">用户名已经存在!</h4>';
}
|
- XML：复杂的数据表示，数据本身有结构化要求，量比较大
1
2
| var products = responseXML.getElementsByTagName('product');
var name = products[0].getElementsByTagName('name')[0].firstChild.nodeValue
|
- **JSON：**中小型数据的表示，应用最广泛的数据表示形式
- Json字符串：有格式要求的字符串
- Json对象：JavaScript语言的内置对象
- 阿里巴巴的fastjson包可以快速拼接JSON
1
2
3
4
| String json = JSON.toJSONString(searchResult);
resp.setContentType("text/Json");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().print(json);
|
1
2
| var dataJson = JSON.parse(data);
var dataJson = data.parseJSON();
|
跨域访问
- 跨域问题的根源是浏览器的同源策略。
- 同源策略指：一个网页的内容只能来自于同一个服务器来源
- 同源：如果两个URL的协议、主机名、端口均一致，才是同源（www.***.com/之后才能不一样）
**非同源的限制：**无法读取非同源网页的Cookie、LocalStorage和indexedDB，无法访问非同源网页的DOM，无法向非同源的URL进行AJAX请求
进行跨域访问的方法：
- Web服务器的代理
- JSONP：在页面中添加script元素，由该元素向其他服务器请求数据，因为script元素的脚本源没有受到限制
- **跨来源资源共享：**在HTTP头中添加额外信息，让浏览器和服务器知道他们可以直接通信
应用场景
- 表单验证
- 动态加载列表框
- 创建自动刷新页面
- 显示进度条
- 创建工具提示
- 自动补全
jQuery
使用AJAX技术的Web应用需要在HTML页面中编写大量的JavaScript代码。并且此类代码的复杂性主要体现在对DOM的操作，jQuery是一个JavaScript工具库，让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
使用方式
- 下载并引入
- 远程CDN资源库在线引入，避免了文件下载
语法
基础语法：
- selector：选择器，用于查找HTML元素
- 标签选择器 ’ li ’
- id选择器 #id
- class选择器 .class
- action：对选择的元素执行操作
文档就绪函数：
- 为了防止HTML文档在被加载完成之前就运行jQuery代码，一般会将所有的jQuery调用放到文档就绪函数中
1
2
3
| $(document).ready(function(){
});
|
常用动作
1
2
3
4
| .html('***');
.text('***');
.replaceWith('***');
.remove();
|
1
2
3
4
| .before('***');
.after('***');
.prepend('***');
.append('***');
|
1
| $('li').on('click',function(){});
|
1
| $('li').on('click',function(e){});
|
CH10 JavaScript进阶
jQuery简化Ajax操作
| 方法 |
描述 |
| $.ajax() |
最核心的方法，以下均为简化 |
| $.get() |
get请求，并加载返回的结果 |
| $.post |
post请求，加载返回的结果 |
| $.getJSON |
get请求json数据，加载结果 |
| $.getScript |
get请求JavaScript数据，加载结果 |
| .load |
将HTML片段加载到元素中 |
响应相关API：
| 属性/方法 |
描述 |
| responseText |
返回的普通文本数据 |
| responseXML |
返回的XML数据 |
| status |
状态码 |
| statusText |
状态描述 |
| .done() |
请求成功执行的代码 |
| .fail() |
请求失败执行的代码 |
| .always() |
总会执行的代码 |
| .abort() |
挂起通信 |
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| $.ajax({
type:'GET',
url :'http://localhost:8022/petstore/autoComplete?searchString='+searchString,
success : function (data){
var dataJson = JSON.parse(data);
var autoInnerHtml='';
$('#autoCompleteLi').empty();
for(var i in dataJson){
if(i>6) break;
autoInnerHtml+='<ul class=\"searchCompUl\" data-name=\"'
+dataJson[i].name+'\">'
+dataJson[i].name+'</ul>';
}
$('#autoCompleteLi').append(autoInnerHtml);
},
error : function (errorMsg){
console.log(errorMsg);
},
});
|
深拷贝和浅拷贝
类似于C++中类的深拷贝和浅拷贝的问题
1
2
3
4
5
6
7
8
| var person={
name:'111';
age:10;
}
var person2={};
person2.name=person.name;
person2.age=person.age;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var person = {
name:'111';
age:10;
sister:{
name:'222';
age:12
}
}
var person2={};
person2.name=person.name;
person2.age=person.age;
person2.sister = person.sister;
|
this关键字
简单来说，this是一个指向对象的引用(指针)，指向属性或方法“当前”所在的对象。
1
2
3
4
5
6
7
8
9
10
11
12
|
var A = {
name:'111';
print:function(){
return this.name;
}
}
var name='222';
var f = A.print;
f();
|
1
2
3
4
5
6
7
8
9
10
11
|
var a={
p:'111';
b:{
m:function(){
console.log(this.p);
}
}
}
a.b.m();
|
函数嵌套中避免多层this：使用一个变量固定this的值，然后内层函数调用这个变量。
1
2
3
4
5
6
7
8
9
10
11
| var o = {
f1:function(){
var _this = this;
console.log(this);
var f2 = function(){
console.log(_this);
}();
}
}
|
