jQuery-Json-AJAX-跨域

一、jQuery1.简介用于简化JavaScript代码开发主要作用对于前端来说写更少代码、做更多事情2、JQuery入门2.1操作选择器$(p) 选取元素。$(p.intro) 选取所有 classintro 的元素。$(p#demo) 选取所有 iddemo 的元素。事件及其事件绑定JavaScript的事件与jQuery事件区别:jQuery事件就是将JavaScript事件名称的on去掉内置效果 显示、隐藏、切换、动画等DOM操作1、 获取元素的内容// text() 获取标签的文本内容不包含标签// html() : 获取标签内的所有内容包含标签// val() : 一般用于获取表单控件的value属性的值2、 设置元素的内容 或者 属性值3、样式操作4、创建元素、添加元素 append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容!DOCTYPE html html langen head meta charsetUTF-8 titleJQuery入门/title script typetext/javascript srcjs/jquery.min.js/script /head body p idapp点击我让我隐藏/p p idapp1点击我让我隐藏1/p p idapp2点击我让我隐藏2/p div stylewidth: 150px;height: 150px;background-color: gray /div button显示/button button隐藏/button /body script typetext/javascript // 找到p标签 /* window.onloadfunction(){ 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 oJSON.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二、JSON1.简介JSONJavaScript Object Notation, JS对象简谱是一种轻量级的数据交换格式作用​ 用户交换数据JavaScript对象与JSON的相互转换// JavaScript对象let obj {a: Hello, b: World};// JSON字符串let json {quot;aquot;: quot;Helloquot;, quot;bquot;: quot;Worldquot;};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 oJSON.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)三、AJAX1、简介Asynchronous Javascript And XML异步JavaScript和XML2.作用对页面进行局部刷新在页面加载后从服务器请求数据在页面加载后从服务器接收数据3、原生ajax编写ajax需要基于XMLHttpRequest步骤:1、创建XMLHttpRequest2、建立请求3、发送数据4、监听服务器状态 -- 从而获取服务器响应回来的数据!DOCTYPE html html langen head meta charsetUTF-8 title原生AJAX编写/title /head body !--div idmsg/div-- input typetext idbtn/span idmsg/span !--button 请求获取服务器的数据/button-- /body script typetext/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?usernamevalue, 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;charsetutf-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.hrefdocument.location.hrefimg: src属性script: src属性3.不支持跨域使用XMLHttpRequest对象发送AJAX请求的时候不能跨域同源策略同源策略是浏览器的一个策略。是一种安全策略。默认情况下发送ajax请求的时候只有同源的才能访问非同源是不允许访问的。什么是同源同源有三要素协议、域名、端口。只有协议、域名、端口完全一致才是同源。以上三要素中任一要素不同则是非同源。http://www.a.comhttps://www.a.com协议不同http://www.a.comhttp://www.b.com域名不同http://www.a.com:8080http://www.a.com:8081端口号不同http://www.a.com/a.jshttp://www.a.com/b.jshttp://www.a.com/cos/b.jshttp://www.a.com/bos/a.js同源策略带来的问题:同源策略主要解决安全问题。【在当下互联网时代项目的并发量很大那么项目就一定需要微服务。而微服务部署在不同的服务器当中那么这个时候服务和服务之间调用是非常正常的。那这个时候就需要解决这个跨域的问题了。】解决跨域1.添加响应头(开发中经常使用) 设置响应头允许某个或者某些站点访问 response.setHeader(Access-Control-Allow-Origin, *);2.jsonp jsonp是一种跨域通信的手段它的原理其实很简单1、首先是利用script标签的src属性来实现跨域。2、通过将前端方法作为参数传递到服务器端然后由服务器端注入参数之后再返回实现服务器端向客户端通信。3、由于使用script标签的src属性因此只支持get方法 跨域过滤器