jQuery-Json-AJAX-跨域

一、jQuery

1.简介

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() - 在被选元素之前插入内容

    
    
    


点击我，让我隐藏
点击我，让我隐藏1
点击我，让我隐藏2




显示
隐藏

二、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       PHP

                JSON       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、创建XMLHttpRequest

            2、建立请求

            3、发送数据

            4、监听服务器状态 -- 从而获取服务器响应回来的数据

 
    
    
        
        
    
    
    

    

    

    
    


    

    后端:
    @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.js

    http://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方法 跨域过滤器