欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > jQuery-Json-AJAX-跨域

jQuery-Json-AJAX-跨域

2024/11/30 13:22:38 来源:https://blog.csdn.net/m0_69307756/article/details/144063242  浏览:    关键词: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() - 在被选元素之前插入内容

<!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 = '{&quot;a&quot;: &quot;Hello&quot;, &quot;b&quot;: &quot;World&quot;}';


            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、监听服务器状态 -- 从而获取服务器响应回来的数据

 <!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 {@Overrideprotected 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();}@Overrideprotected 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方法 跨域过滤器

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com