AJAX

    技术2022-07-11  97

    原生AJAX

    ajax概念:在不进行整个页面的更新的情况下,局部更新界面。 局部刷新技术 ajax 和请求数据有关 它的出现开始前后端分离 ajax出现之前 开发人员前端和后端都做 前后端分工 中间由ajax来对接 ajax就是异步的javascript和xml(树形结构文档 xhml—写法和html写法一致 写的标签是自定义的标签) 作用是:快速创建动态网页的技术 ajax在与后端进行少量的数据交互,返回到前端,实现异步更新。 ajax工作原理: 五步法:书写原生ajax 1.创建ajax对象:考虑兼容 ie5 、ie6的兼容 2.建立连接:使用open 方法 参数 1 ) method 请求的方式 get post 2) 连接的服务器文件地址 url 3)async ajax 请求是异步的环视同步的, 默认是异步, true异步、 false 同步 4)用户名 5)密码 3.发送请求:使用send 方法 如果你的方式是get方式, 请求的时候传递的参数直接写在url路径之后 http://www.maodou.com/getdata?id=10086&pwd=12345; 如果是post 方式传递参数,直接卸载send方法里面 send({id:10086,pwd:12345}); 4.ajax响应事件 5.页面更新 原生ajax同步异步 ajax请求方式不同 传递参数的格式不同 ajax可能同步 异步 什么是ajax的同步异步 同步是等待ajax请求响应结束 直接在继续加页面 异步是ajax请求和页面同时加载 原生js不能使用同步 ,原因是ajax对象在主线程 原生ajax封装 封装 请求方式和传递参数 直接在外面调用封装的ajax方法 封装了匿名函数回调 原生ajax和后台服务器关联 原生的ajax和后台关联 get方式的值在路径上传递 res是后台服务器返回的数据 ajax请求会出现什么问题 跨域的问题,怎么出现跨域: 1.协议不同 2.主机名称不同 3.端口号不同 如果出现跨域 1.cros跨域 直接去后端设置 header Access-Control-Allow-Origin: * 允许所有域名访问我 2.jsonp跨域 jsonp跨域不是ajax ,原理是通过src跨域 这个解决方案是在前端设置的,后端要进行相应的jsonp跨域操作 post方式请求后台 设置请求头,请求头设置到open之后send之前 post 传值的参数和get 一致

    jsonp跨域

    只要协议,端口,域名有一个不同,即为跨域! jsonp跨域是通过前端src访问后端接口、传递参数以及回调函数 后端接收回调函数 ,返回回调函数的执行到前端 前端的函数执行,获取服务器响应 jsonp跨域原理—src跨域: 因为在前端src属性可以直接连接远程的api(程序应用集也叫接口) ----这个jsonp跨域没有使用原生的ajax jsonp 跨域的api接口: http://www.maodou.com?id=1000&name=123&callback=getdata jsonp 跨域的回调函数 callback=getdata 携带函数到后端 iframe方式 iframe设置domain 针对当前网页和服务器网页 主域名和子域名的问题 解决这个跨域的 域名降级处理: 在两个页面设置 document.domain 降级成两个服务器域名的相同部分 为什么会产生跨域?同源策略不同

    js内置对象

    js里面内置对象 Array数组对象 Math对象 String字符串 Date日期对象 自定义对象 object创建 {} 类似json Object.create(); 使用现有对象创建新对象的__proto__(原型链) 也叫原型对象 {}proto: Object 使用现有对象添加到新对象的__proto__上 即原型对象(继承) 第二个参数 列举新对象属性写成对象 使用value属性 value: 42, writable: true, enumerable: true, configurable: true 上面是设置对象属性的配置

    js里面的继承

    1.原型链继承 2.构造继承 3.实例继承 4.拷贝继承 5.组合继承 6.寄生组合继承 继承:子类继承父类的属性和方法 要继承:必须有父类 子类继承父类的属性和方法 1、原型链继承 通过下面两个内置对象了解到js底层是通过原型链继承而来的 由外到内 ,通过__proto__属性连接形成链式,就叫原型链 原型链继承是通过prototype属性实现继承 实例化对象: 默认继承Object 原型对象的构造函数指向自身constructor 构造函数在类被实例化的时候直接执行 原型链继承的核心:让子类的原型等于父类的实例 原型链继承不能直接继承子类的原型属性和方法 ,简单说就是覆盖了 在原型链继承之后,给子类添加原型属性和方法 在继承hi后去添加是直接添加给子类的原型对象的 原型链继承之后,如果没有原型链继承 子类的原型对象指向自身prototype 原型链继承的特点: 子类的实例继承自身的实例属性也继承父类里面的构造属性和方法 父类的原型属性和方法 原型链继承的缺点: 1.不能继承子类的原型属性和方法 2.只能进行单继承 不能多继承 3.继承之后 原型对象上的属性全是共享 4.子类不能直接向父类传递参数 2、构造继承 通过使用call apply 来实现继承 直接在子类的内部去写call apply 优点:可以实现多继承、可以向父类传递参数 缺点:构造继承 无法继承父类的原型属性和方法 、 子类的实例是本身不是父类 3、实例继承 在子类内部直接构造父类的实例 ,直接new父类 优点:不限制调用方式、可以向父类传递参数 缺点:不能实现多继承、不能拿到子类构造属性和方法、子类的实例不是本身而是父类 4、拷贝继承 将父类里面的方法和属性 拷贝给子类 优点:支持多继承 、子类对象实例是本身不是父类,可以向父类传递参数 缺点: 在继承的时候不断new 占内存 5、组合继承 组合继承:原型链继承+构造继承 相互弥补自己的缺点 子类的实例即是本身也是父类 可以实现多继承 可以像父类传递参数 没有实现原型对象属性的共享 调了两次父类的构造函数 构造继承只能获取到父类的属性和方法 拿不到原型属性和方法 6、寄生组合 寄生组合是处理组合继承的缺点,避免调用两次父类的构造函数 寄生组合原理是将父类的原型对象给一个空对象的prototype 再把空对象和子类的原型对象关联 工厂模式 使用函数,直接创建对象返回对象,避免多次创建对象 构造函数模式 构造函数本身也是函数,只不过是一个创建对象的函数 把程序抽象成方法 抽象数据分页 原型模式 原型对象上的属性和方法是共享的 空对象获取属性是自身没有改属性, 则原型对象上的属性充当默认值 设置空对象属性时是给自己设置属性,不会修改原型对象上的属性 ,应为原型对象上的属性是共享的 缺点:是原型对象属性方法共享 可以搭配 ,函数构造模式+原型模式, 混合模式 使用原型对象的好处是可以让所有对象实例共享他所包含的属性和方法。不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。

    Processed: 0.020, SQL: 9