1.ajax
什么是ajax?
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
ajax优势?
改善的用户体验- AJAX提供的更丰富的用户体验是其主要优点。AJAX允许网页持续更新,但只需要和服务 器交互很少的数据。这样,就能在不必整个更新网页的情况下更新网页的一部分。经典的网页技术必须整个更新网页(即使你只想更新某一部分),是笨重的。 AJAX增强了浏览器性能,使更快的浏览成为可能因此提供了有求必应的用户体验。
增强用户生产力- AJAX 库提供了面向对象的辅助函数,能给用户减少麻烦,增强生产力。另外,一个良好配 置的ASP.NET应用有它自己的数据访问层和业务层。最后,“鲁棒”的ASP.NET应用包含UI层,在这一层执行服务器端操作。如果你已经包含了这些 特性,AJAX只需要一个额外的AJAX服务层和一些客户端特性的改进。这样,开发代价就减小了,用户生产效率也就增加了。流行的站点如亚马逊,谷歌,雅 虎等等都在开发中使用了AJAX。
减少带宽的使用并增加速度- AJAX使用客户端脚本来和web服务器通讯,用Javascript来交互数据。使用AJAX能减少网路负载和带宽使用并且只获得你所需的数据。这样能给你更快的接口和更低的响应时间。响应更快因此性能和速度增加了
增强兼容性- AJAX和ASP.NET,J2EE,PHP或者其他任何语言兼容。它几乎支持所有流行的浏览器比如IE5及以上版本,Firefox1.0及以上版本,Safari1.2及以上版本,Opera7.6及以上版本,还有RockMelt。
支持异步处理- 使用XmlHttpRequest来进行异步数据获取,这是AJAX应用的中坚力量。所以,请求能被有效的处理,动态内容加载被提升到一个更高的层次,性能也得到了增强
减少服务器请求和网络负载-Atlas,微软AJAX库的一种较老的形式,是一个整合了客户端Javascript库并且易用的框架,能和ASP.NET一起开发AJAX应用。它提供了跨浏览器支持和面向对象的API,这用来能开发具有最小化服务器请求/网路负载的应用,并能实现异步处理
更容易导航-AJAX应用能被用来简化用户在网页间的过渡,而不需要使用传统的前进后退键
ajax的缺点?
浏览器不兼容-AJAX高度依赖Javascript,而不同的浏览器对Javascript支持性不同。这成 了一个问题,尤其是当AJAX必须跨许多浏览器工作的时候。那些不支持Javascript或者不支持Javascript某些选项的浏览器将不能够正常 使用ajax。由于ajax对Javascript的依赖性,它不适用移动应用。你的web浏览器的后退键不能如期运行。
不安全性-网页可能很难调试,增加网页的代码量,你的网页更可能遇上严峻的安全威胁。
增加Web服务器的负载-如果你增加一个自动更新的功能,它每隔几秒向服务发起请求,那么就会增加服务器的负载
原生ajax
原生ajax(局部刷新技术-登录、注册等) a-async 异步的 j-javascript a-and x-xml 可扩展的标记语言(数据格式) 现在事实json 取代
ajax是web发展的web2.0的标记事件 ajax是一门html css xml 的综合技术 核心是异步引擎对象 XMLHttpRquest对象
2.手写原生ajax(熟练) 没写完
1.创建ajax对象
var xhr; //创建ajax对象
if(window.XMLHttpRequest){ //兼容IE
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.建立连接 三个参数 请求方式 请求地址 同步还是异步 true 异步
xhr.open("get",url,true); //建立连接
3.发送请求
xhr.send(); //发送
//post
//xhr.send({userName:"admin",password:"admin"})
console.log(xhr)
xhr.onreadystatechange = function(){ //获取数据
if(xhr.readyState == 4 && xhr.status == 200){
var data = JSON.parse(xhr.responseText);
}
}
3.HTTP常见的状态码
https://blog.csdn.net/laishaohe/article/details/79052085
4.什么是同源策略?
JavaScript访问资源,处于安全方面考虑,要限制JS的访问能力,不允许跨域访问资源。如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取,不同域下DOM任意操作,ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据。
(再次强调)同源策略:同协议、同域名、同端口。
5、跨域(怎么解决跨域问题)(跨域是什么)(为什么会有跨域):
造成跨域的原因就是浏览器的同源策略:只要满足协议、主机、端口一致,则两个页面具有相同的源。同源策略限制了从同一个源加载的文档或脚本如何来自另一个源的资源进行交互,这是一个用于隔离潜在恶意文件的重要安全机制。(直白:我在一个域名地址下的网页,如果请求一个受到同源策略限制的地址接口的时候,就会报错,这是为了在我的网页下请求别的地址的文件可能是恶意代码,造成不必要的问题。)
解决方法:
① jsonp,允许script加载第三方资源。jsonp是一种非正式的传输协议,该协议的一个要点就是允许用户传递一个callback函数给服务端,然后服务端返回数据的时候会将json数据包裹在这个callback函数中返回。jsonp的本质是利用script标签的src熟悉进行跨域请求,但只能用于get请求。
② 反向代理 (nginx 服务内部配置 Access-Control-Allow-Origin *);
③ cors 前后端协作设置请求头部,Access-Control-Allow-Origin 等头部信息
④ iframe 嵌套通讯 (可以与下面的postmessage一起使用)
⑤ window.postmessage ( ),该方法的使用须与iframe嵌套使用。
手写代码
// 思路:将要改变this指向的方法挂到目标this上执行并返回
Function.prototype.mycall = function (context) {
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
context = context || window
context.fn = this
let arg = [...arguments].slice(1)
let result = context.fn(...arg)
delete context.fn
return result
}
https://blog.csdn.net/weixin_48196628/article/details/107408782