前端扫雷之ajax
来源:互联网 发布:淘宝十字绣代绣可靠吗 编辑:程序博客网 时间:2024/05/18 01:25
前言
学习前端也有大半年的时间了,感觉从浏览器到html/css/js再到一些框架都有学习,并且很多地方自以为了解得也比较深入。直到前几天接到阿里的面试电话,几个问题瞬间懵逼。。。
其实面试官问的问题我之前都有了解过,当时看了也觉得都理解了,但一回答就发现好多细节都记不清了!!面试自然也就GG了,痛定思痛,决定把前端的这些雷区再好好扫一遍,千万避免知道但又说不清楚的状态。
由于刚接触js不久就开始用jquery,上来就是 $.get,$.post ,几乎没有用过原生的ajax,今天就先把ajax好好理理。
什么是ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
ajax 允许javaScript向服务器发起请求,通过服务器返回的数据动态的更新部分页面而不用重载整个页面。简单的说就是用JavaScript与后台进行数据交换,在不刷新页面的情况下访问服务器数据库。
说到这里我就有一个疑问了,我们不是可以通过设置dom属性,如img标签的src属性,来更新页面吗?这个不是也是局部更新吗?
对这个问题我的理解是,这里的更新是获取服务器上的更新,比如说一个评论区,如果不用ajax,当有其他人的新评论传到了服务器上时,你要获取就只能刷新整个页面,而使用ajax就可以访问服务器获取最新的评论直接显示。而本地设置dom属性等只是更新了本地网页而已(页面其实并未更新),刷新之后还是会变为原样。
即:服务器上页面部分更新时可以通过重载页面而显示更新,也可以通过ajax获取更新再显示出来。
ajax实现
JavaScript中ajax的实现是基于XMLHttpRequest对象的,一般缩写为XHR。XHR对象不仅可以实现异步的ajax,也能实现同步的http请求。
在控制台打印这个对象可以查看到它的原型属性和方法,这些在我们新建一个实例对象时是会被继承的。下面我们来实现一个简单的ajax请求。
get
//新建一个XHR实例var xmlhttp=new XMLHttpRequest();//设置请求参数: 请求方式、url、是否异步xmlhttp.open("GET","https://www.baidu.com",true);//状态变化时回调函数xmlhttp. onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ console.log(xmlhttp.responseText); }}//发送请求xmlhttp.send();
通过上面这个ajax请求我们就爬到了百度首页的源码。
post
由于post请求数据是放在请求体中的(get请求数据是放在请求行的url中),因此要发送post请求要通过额外的两步
//新建一个XHR实例var xmlhttp=new XMLHttpRequest();//设置请求参数: 请求方式、url、是否异步xmlhttp.open("POST","https://www.baidu.com",true);//设置请求头中的消息格式xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//状态变化时回调函数xmlhttp. onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ console.log(xmlhttp.responseText); }}//发送数据xmlhttp.send("name=123&password=123");
当然,XMLHttpRequest对象还提供同步的http请求方式,只要将open方法的第三个参数设为false就行了,此时我们不再使用onreadystatechange来监测状态变化了,只需要将函数放到send后面执行即可。
兼容性
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
兼容性检测代码如下:
var xmlhttp;if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();}else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
- 前端扫雷之ajax
- 前端扫雷之http协议
- 前端扫雷之同源策略
- 前端扫雷之cookie和session
- 前端扫雷之XSS和CSRF攻击
- 前端扫雷之cookie/localStorage/sessionStorage
- 前端之ajax解析
- 前端学习笔记之ajax
- 【Web前端】AJAX之点滴介绍
- 前端面试之Ajax和Json
- JavaWeb前端之AJAX的初步学习
- win32之扫雷
- C#小游戏之扫雷
- C#之五十 扫雷
- 小游戏之扫雷
- C++小游戏之扫雷
- FOJ 1056之扫雷游戏
- MFC简单小游戏之扫雷
- 《ACM程序设计》书中题目B
- 深入理解SPI总线协议
- objc非主流代码技巧
- NOIP 2003 普及组 复赛 table 乒乓球
- parasoft Jtest 使用教程:使用初始化信息扩展测试用例
- 前端扫雷之ajax
- console.log是异步的吗
- D-log
- SQL语法手册
- 帝都的所思所想
- java.net.ConnectException: Connection refused: connect 解决
- Swift 原始值
- Ubuntu15.10安装docker和docker-compose
- sguap 遇到的异常以及处理方法