jQuery-Json-AJAX-跨域
一、jQuery
1.简介
-
用于简化JavaScript代码开发
主要作用：对于前端来说，写更少代码、做更多事情
2、JQuery入门
2.1操作
选择器
$("p") 选取元素。
$("p.intro") 选取所有 class="intro" 的元素。
$("p#demo") 选取所有 id="demo" 的元素。
事件及其事件绑定
JavaScript的事件与jQuery事件区别:
jQuery事件就是将JavaScript事件名称的on去掉
内置效果 显示、隐藏、切换、动画等
DOM操作
1、 获取元素的内容
// text() ： 获取标签的文本内容，不包含标签
// html() : 获取标签内的所有内容，包含标签
// val() : 一般用于获取表单控件的value属性的值
2、 设置元素的内容 或者 属性值
3、样式操作
4、创建元素、添加元素 append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery入门</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<p id="app">点击我，让我隐藏</p>
<p id="app1">点击我，让我隐藏1</p>
<p id="app2">点击我，让我隐藏2</p>
<div style="width: 150px;height: 150px;background-color: gray">
</div>
<button>显示</button>
<button>隐藏</button>
</body>
<script type="text/javascript">
// 找到p标签
/* window.onload=function(){
let ap = document.querySelector("#app");
// 绑定事件
ap.onclick = function(){
this.style.display = 'none';
}
}*/
$(function () {
$('p').click(function () {
$(this).hide()
})
})
$(function () {
$('p').each(function (index, element) {
console.log(index+":"+element)
})
})
$('button:first').click(function () {
$('div:first').show()
})
$('button:last').click(function () {
$('div:first').hide()
})
let json = '{"name":"zs","age":18,"subject":["Java","C++","net"]}';
let o=JSON.parse(json)
console.log(o.name)
console.log(o.age)
console.log(o.subject[0])
console.log(o.subject[1])
console.log(o.subject[2])
let arr=[18,"sc",{"name":"zs","age":18}]
let s = JSON.stringify(arr);
console.log(s)
console.log(typeof s)
</script>
</html>二、JSON
1.简介
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式
作用：
用户交换数据
JavaScript对象与JSON的相互转换
// JavaScript对象
let obj = {a: 'Hello', b: 'World'};
// JSON字符串
let json = '{"a": "Hello", "b": "World"}';
C++ Java PHPJSON JSON
语法:[ ] { } : ,
数据:
对象、数组、数字、字符串、字面值(true/false/null)
案例一:{
"name": "John Doe",
"age": 18,
"address":
{
"country" : "china",
"zip-code": "10000"
}
}JSON : [ ] -- 表示数组、集合
{ } -- 表示对象
案例二:
[3, 1, 4, 1, 5, 9, 2, 6]
表示数组
{
"a": 1,
"b": [1, 2, 3]
}[1, 2, "3", {"a": 4}]
案例：
let json = '{"name":"zs","age":18,"subject":["Java","C++","net"]}';
let o=JSON.parse(json)
console.log(o.name)
console.log(o.age)
console.log(o.subject[0])
console.log(o.subject[1])
console.log(o.subject[2])
let arr=[18,"sc",{"name":"zs","age":18}]
let s = JSON.stringify(arr);
console.log(s)
console.log(typeof s)三、AJAX
1、简介
Asynchronous Javascript And XML（异步JavaScript和XML）
2.作用
对页面进行局部刷新
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
3、原生ajax编写
ajax需要基于XMLHttpRequest
步骤:
1、创建XMLHttpRequest2、建立请求
3、发送数据
4、监听服务器状态 -- 从而获取服务器响应回来的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生AJAX编写</title>
</head>
<body>
<!--<div id="msg"></div>-->
<input type="text" id="btn"/><span id="msg"></span>
<!--<button >请求获取服务器的数据</button>-->
</body>
<script type="text/javascript">
window.onload = function () {
// 获取节点
let button = document.querySelector("#btn");
// 给节点绑定事件
button.onblur = function () {
let value = this.value;
// 发送ajax请求
// 创建XMLHttpRequest对象
let xmlHttpRequest = new XMLHttpRequest();
// 建立请求 (请求方式,请求资源名称,同步/异步)
/* xmlHttpRequest.open("GET", "http://localhost:8080/jQuery_Json_Ajax_war_exploded/ajaxDemo?username="+value, true)
// 发送数据
xmlHttpRequest.send();*/
// POST时
xmlHttpRequest.open("post", "http://localhost:8080/jQuery_Json_Ajax_war_exploded/ajaxDemo", true)
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("username=" + value);
// 监听服务器状态
xmlHttpRequest.onreadystatechange = () => {
// 服务器响应完成、服务器正常
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
let msg = document.querySelector("#msg");
msg.innerHTML = xmlHttpRequest.responseText;
}
}
}
}
</script>
</html>
后端:
@WebServlet("/ajaxDemo")
public class AjaxController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
String username = req.getParameter("username");
// 服务器响应数据给客户端
PrintWriter writer = resp.getWriter();
if("zs".equals(username)){
writer.write("用户名被占用,请重新输入");
}else{
writer.write("用户名可以使用");
}
writer.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
doGet(req,resp);
}
}
四、跨域
1、概念:
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
浏览器从一个域名的网页去请求另一个域名的资源时，出现协议、域名、端口、任一不同，都属于跨域。比如在百度的一个页面当中，访问京东商城当中的某个资源。这就是跨域。
2、支持跨域：
超链接
form表单
window.location.href
document.location.href
img: src属性
script: src属性
3.不支持跨域
使用XMLHttpRequest对象发送AJAX请求的时候不能跨域
同源策略
同源策略是浏览器的一个策略。是一种安全策略。
默认情况下发送ajax请求的时候，只有同源的才能访问，非同源是不允许访问的。
什么是同源？同源有三要素：协议、域名、端口。
只有协议、域名、端口完全一致，才是同源。
以上三要素中任一要素不同，则是非同源。http://www.a.com
https://www.a.com
协议不同
http://www.a.com
http://www.b.com
域名不同http://www.a.com:8080
http://www.a.com:8081
端口号不同http://www.a.com/a.js
http://www.a.com/b.jshttp://www.a.com/cos/b.js
http://www.a.com/bos/a.js同源策略带来的问题:
同源策略主要解决安全问题。
【在当下互联网时代，项目的并发量很大，那么项目就一定需要微服务。
而微服务部署在不同的服务器当中，那么这个时候服务和服务之间调用是非常正常的。
那这个时候就需要解决这个跨域的问题了。】
解决跨域
1.添加响应头(开发中经常使用) 设置响应头，允许某个，或者某些站点访问 response.setHeader("Access-Control-Allow-Origin", "*");
2.jsonp jsonp是一种跨域通信的手段，它的原理其实很简单：
1、首先是利用script标签的src属性来实现跨域。
2、通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3、由于使用script标签的src属性，因此只支持get方法 跨域过滤器