diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-11-29--JSON.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-11-29--JSON.md" new file mode 100644 index 0000000000000000000000000000000000000000..307bdb718673ae265339464d4238802332d3725c --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-11-29--JSON.md" @@ -0,0 +1,79 @@ +# JSON + +## 1.JSON.parse(json): + +**以文本字符串形式接收JSON对象作为参数,并返回相应的对象(obj)** + +```js +//JSON.parse(json):将json转成对象 +var jsonObj = JSON.parse(json); +console.log(jsonObj);//打印 => {name:'周飘',age:18} json转为对象 +``` + +## 2.JSON.stringify(obj): + +**接收一个对象作为参数,返回一个对应的JSON字符串** + +```js + //JSON.stringify(obj):将对象转成json数据格式 + var obj = { + name: '周飘', + age: 18 + } + var json = JSON.stringify(obj); + console.log(json);//打印 => {"name":"周飘","age":18} json格式属性都是双引号 +``` + +json转换成对象以后遍历 + +```js + var obj = { + name: '周飘', + age: 18 + } + var json = JSON.stringify(obj); + //JSON.parse(json):将json转成对象 + var jsonObj = JSON.parse(json); + //遍历 + //jsonObj is not iterable:不可迭代对象 + for (let e in jsonObj) { + console.log(e + ' ' + jsonObj[e]); + } + console.log(jsonObj);// name 周飘 age 18 +``` + +# HTTP:超文本传输协议 + +请求(request)和响应(response) +请求:请求报文 +请求行:方法(get,post) 请求地址(url) http版本(1.1) + +# AJAX + +AJAX核心原理主要是 异步 与 无刷新 + +```js +//1.创建http请求对象 +var oAjax = new XMLHttpRequest(); +//2.请求行设置 +oAjax.open("GET","data.json",true); +//3.发送一个请求 +oAjax.send(); +//4. +//the server responded with a status of 404 (Not Found) 这个问题代表找不到 路径问题 +oAjax.onreadystatechange = function () { + if(oAjax.readyState == 4){//当等于4的时候表示解析成功 + if(oAjax.status == 200){//200表示连接成功 + console.log(oAjax.responseText);//获取到json + var obj = JSON.parse(oAjax.responseText);//转成对象 + console.log(obj); + } + } +} +``` + + + + + +数据结构 计算机网络 数字逻辑 组成原理 操作系统 \ No newline at end of file diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-11-30--jQuery Ajax.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-11-30--jQuery Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..b347c202a173c868229be896c2dfdf83cde0f71c --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-11-30--jQuery Ajax.md" @@ -0,0 +1,478 @@ +# jQuery Ajax + +**Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。** + +异步与同步: 页面刷新: + +#### 1.POST + +```JS + + + + + + + + Document + + + + + + + +``` + +#### $.get() + +语法: + +```js +$.get(url, data, fn, type) +``` + +| 参数 | 说明 | +| :--: | :--------------------------------- | +| url | 必选参数,表示被加载的页面地址 | +| data | 可选参数,表示发送到服务器的数据 | +| fn | 可选参数,表示请求成功后的回调函数 | +| type | 可选参数,表示服务器返回的内容格式 | + +参数type返回的内容格式包括:text、html、xml、json、script或default。 + +```JS + + + + + + + + Document + + + + + + + + + + + + + +``` + + + +#### $.post() + +get方式不适合较大的数据量,并且它的请求信息会保存在浏览器缓存中,因此安全性不好; + +post方式不存在这两个方面的不足。 + +语法: + +``` +$.post(url,data,fn,type) +``` + +#### $.getJSON() + +在jQuery中,我们可以使用$.getJSON()方法来通过Ajax获取服务器中JSON格式的数据。 + +语法: + +``` +$.getJSON(url ,data, function(data){ +…… +}) + +``` + +说明: .getJSON()是一个全局方法,所谓“全局方法”,指的是直接定义在jQuery对象(即“$”)下的方法。 参数url表示被加载的文件地址;参数data表示发送到服务器的数据,数据为“键值对”格式;参数fn表示 请求成功后的回调函数,请求失败是不会处理的。 + +```json + [ + { + "name": "刘备", + "sex": "男", + "age": 24 + }, + { + "name": "关羽", + "sex": "男", + "age": 24 + }, + { + "name": "小乔", + "sex": "女", + "age": 23 + } + ] +``` + +```js + + + + + + + + Document + + + + + + + + + + + + + +``` + + + +#### $.getScript() + +在jQuery中,我们可以使用.getScript()方法通过AJAX来获取并运行一个外部JavaScript文 件。.getScript()是一个用于动态加载JavaScript的方法。当网站需要加载大量JavaScript时,动态加载 JavaScript就是一个比较好的方法。当需要某个功能时再将相应的JavaScript加载进来。 + +语法: + +```js +$.getScript(url, fn) +``` + +| 参数 | 说明 | +| ---- | ---------------------------------------- | +| url | 必选参数,表示被加载的JavaScript文件路径 | +| fn | 可选参数,表示请求成功后的回调函数 | + +准备数据js文件: + +```js +console.log("jQuery AJAX学习"); +``` + +相对传统的加载方式,$.getScript()有以下两个优点。 1. 异步跨域加载JavaScript文件。 2. 可避免提前加载JavaScript文件,只有需要的时候才会去加载。这样可以减少服务器和客户端的负 担,加快页面加载速度。 + +常见问题: + +1.每次执行该功能的时候都会去请求一次这个JavaScript文件,这样不是在帮倒忙吗? + +其实$.getScript()是对ajax()方法的一个封装,可以使用ajax()方法的缓存来将http的状态从200改变成 304,从而使用客户端的缓存。 + +```js + + + + + + + + Document + + + + + + + + + + + + + +``` + + + +#### $.ajax() + +上述方法都是ajax的简化版,它们能实现的功 能,.ajax()都能实现,因为$.ajax()是最底层的方法。 + +语法: + +``` +$.ajax(options) +``` + +说明: + +$.ajax()方法只有一个参数,这个参数是一个对象。该对象中包含了Ajax请求所需要的各种信息,并且以 “键值对”的形式存在。 options是一个对象,这个对象内部有很多参数可以设置,所有参数都是可选的,如下表所示: + +| **参数** | **说明** | +| ----------- | ------------------------------------------------------- | +| **url** | **被加载的页面地址** | +| **type** | **数据请求方式,“get"或"post”,默认为"get"** | +| **data** | 发送到服务器的数据,可以是字符串或对象 | +| dataType | 服务器返回数据的类型,如:text、html、script、json、xml | +| beforeSend | 发送请求前可以修改XMLHttpRequest对象的函数 | +| complete | 请求“完成”后的回调函数 | +| **success** | 请求“成功”后的回调函数 | +| **error** | 请求“失败”后的回调函数 | +| timeout | 请求超时的时间,单位为“毫秒” | +| global | 是否响应全局事件,默认为true(即响应) | +| async | 是否为异步请求,默认为true(即异步) | +| cache | 是否进行页面缓存,true表示缓存,false表示不缓存 | + +```js + + + + + + + + Document + + + + + + + + + + + + + +``` +