diff --git "a/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.10.29Ajax.md" "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.10.29Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..e23902efc437f24f69ae78503886f61c2cdc5bba --- /dev/null +++ "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.10.29Ajax.md" @@ -0,0 +1,35 @@ +Ajax + +核心原理是异步无刷新 + +实时获取数据 + +第一步:发送http请求,创建XMLHttpRequest对象 + +var oAjax = new XMLHttpRequest(); + +第二步:请求行设置 + +oAjax.open("GET","",true); + +第三步:发送一个请求 + +oAjax.send(); + +第四步:接收返回 + +oAjax.onreadystatechange = function () { if(oAjax.readyState == 4){ if(oAjax.status == 200){ console.log(oAjax.responseText); var obj = JSON.parse(oAjax.responseText); console.log(obj); } } } + +JSON + +JSON.stringify(): + +将对象转发成json数据类型 + +var jsonn = JSON.stringify(obj) console.log(jsonn); + +JSON.parse(): + +将json转发成对象 + +var objj = JSON.parse(jsonn); console.log(objj); \ No newline at end of file diff --git "a/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.28jQuery\346\226\271\346\263\225.md" "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.28jQuery\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..61fc48469c906c2c06b5a2e565896db3342e56cf --- /dev/null +++ "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.28jQuery\346\226\271\346\263\225.md" @@ -0,0 +1,43 @@ +**1、遍历对象(有附加参数)** + +$. each(Object, function(p1, p2) { + + this; //这里的this指向每次遍历中Object的当前属性值 + + p1; p2; //访问附加参数 + +}, ['参数1', '参数2']); + +**2、遍历数组(有附件参数)** + +$. each(Array, function(p1, p2){ + + this; //这里的this指向每次遍历中Array的当前元素 + + p1; p2; //访问附加参数 + +}, ['参数1', '参数2']); + +**3、遍历对象(没有附加参数)** + +$. each(Object, function(name, value) { + + this; //this指向当前属性的值 + + name; //name表示Object当前属性的名称 + + value; //value表示Object当前属性的值 + +}); + +**4、遍历数组(没有附加参数)** + +$.each(Array, function(i, value) { + + this; //this指向当前元素 + + i; //i表示Array当前下标 + + value; //value表示Array当前元素 + +}); \ No newline at end of file diff --git "a/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.29 ajax.md" "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.29 ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..9136962292c85412e088d9a98042cb6f13417520 --- /dev/null +++ "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.29 ajax.md" @@ -0,0 +1,69 @@ +一、Ajax简介 +Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。 + +Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。 + +Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下,能够更新部分⽹⻚的技术。 + +通过在后台与服务器进⾏少量数据交换,Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下,对⽹⻚的某部分进⾏更新。 + +传统的⽹⻚(不使⽤ Ajax)如果需要更新内容,必须重载整个⽹⻚⻚⾯。 + +二、同步与异步 +1、同步:发送⼀个请求,需要等待响应返回,然后才能够发送下⼀个请求,如果该请求没有响应,不能发送下⼀个请求,客户端会处于⼀直等待过程中。 + +2、异步:发送⼀个请求,不需要等待响应返回,随时可以再发送下⼀个请求,即不需要等待。 + +三、应用场景 +1、在线视频、直播平台等…评论实时更新、点赞、⼩礼物、… + +2、会员注册时的信息验证,⼿机号、账号唯⼀ + +3、百度关键搜索补全功能 + +四、实现 +4.1、原生JS实现 +实现步骤: + +1、定义⼀个XMLHttpRequest核⼼对象xhr; + +2、通过xhr.open⽅法给当前对象提供访问⽅式、URL等。 + +3、发送当前的请求⾄指定的URL + +4、接收返回值并处理 + +案例需求:前台⻚⾯通过⼀个按钮向后台发送⼀个Ajax请求,后台做完处理后向前台⻚⾯响应⼀段⽂本信息显示在⻚⾯上 + + +JSON.stringify(obj):将对象转成json数据格式 + +JSON.parse(json):将json转成对象 + +http:超文本传输协议 + +​ //请求(request)和响应(response) + +​ //请求:请求报文 + +​ //请求行:方法(get,post) 请求地址(url) http版本(1.1) + +​ + +//ajax:异步 无刷新 + +​ //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) \ No newline at end of file diff --git "a/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.30 \345\216\237\347\224\237Ajax.md" "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.30 \345\216\237\347\224\237Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..1e164dad19dd9a8d57e8ec6808359b13cfc155ba --- /dev/null +++ "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.11.30 \345\216\237\347\224\237Ajax.md" @@ -0,0 +1,29 @@ +#### JSON.parse() + +**以文本字符串形式接受 JSON 对象作为参数,并返回相应的对象。** + +#### JSON.stringify() + +**接收一个对象作为参数,返回一个对应的 JSON 字符串。** + +#### $.get() + +$.get(url, data, fn, type) + +#### $.post() + +$.post(url,data,fn,type) + +#### $.getJSON() + +$.getJSON(url ,data, function(data){ +…… +}) + +#### $.getScript() + +$.getScript(url, fn) + +#### $.ajax() + +$.ajax(options) \ No newline at end of file diff --git "a/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.12.1 Promise.md" "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.12.1 Promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..79b7c578429d88759eb4d7ec0318ff37d3ca07ce --- /dev/null +++ "b/12 \345\221\250\346\263\275\345\274\272/\347\254\224\350\256\260/2022.12.1 Promise.md" @@ -0,0 +1,55 @@ +什么是Promise +Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。(ps:什么是原型:javascript中的原型与原型链_傻小胖的博客-CSDN博客_javascript原型和原型链) + +Promise对象有以下两个特点。 + +(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。 + +(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。 + + + //Promise + + + + //PromiseState(在每个promise对象中,状态只会改变一次):pending准备中 + + // fulfilled(成功) :调用了resolve函数,将状态改为成功 + + // rejected(失败):调用了reject函数,将状态改为失败 + + + + //PromiseResult:接收resolve或者reject中的参数 + + // const p = new Promise((resolve, reject) => { + + // // resolve('这是成功'); + + // reject('这是失败'); + +​ + + // }).then(data =>{ + + // console.log('成功then调用'); + + // return 123 + + // //catch:捕获异常 + + // }).catch( + + // function (e) { + + // console.log(e); + + // } + + // ) + + // console.log('1111111111111'); + + //then(成功时调用的函数,失败时调用的函数),返回值也是一个promise对象,pending + + // console.log(p) \ No newline at end of file