近一个月面试, 有两家笔试题都让写原生 ajax
在此做一下笔记, w3school 官网讲的超级清楚 明白 又 简单易懂, 建议看 w3school
get 请求
- function ajaxGet(url) {
- // 三元表达式
- // 所有现代浏览器 (IE7+,Firefox,Chrome,Safari 以及 Opera) 均内建 XMLHttpRequest 对象.
- //IE5 和 IE6 使用 ActiveXObject
- var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
- // 每当 readyState 改变时, 就会触发 onreadystatechange 事件.
- //readyState 属性存有 XMLHttpRequest 的状态信息.
- //readyState 有 0-4 五个值:
- //0: 请求未初始化
- xmlHttp.onreadystatechange = function() {
- if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
- console.log("请求发送成功!");
- }
- else {
- console.group("请求发送失败!");
- console.log("XMLHttpRequest 的状态:"+xmlHttp.readyState);
- console.log("服务器响应状态:"+xmlHttp.status);
- console.groupEnd();
- }
- }
- // 发送 set 请求
- xmlHttp.open("GET",url,true);
- xmlHttp.send();
- }
post 请求
- function ajaxPost(url,data){
- var xmlHttp = window.XMLHttpRequest : new XMLHttpRequest() ? new ActiveXObject("Microsoft.XMLHTTP");
- xmlHttp.onreadystatechange = function() {
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
- console.log("POST 请求发送成功");
- }
- else {
- console.group("请求发送失败!");
- console.log("XMLHttpRequest 的状态:"+xmlHttp.readyState);
- console.log("服务器响应状态:"+xmlHttp.status);
- console.groupEnd();
- }
- }
- xmlHttp.open("POST","文件在服务器上的位置或者请求的 URL","同步请求 / 异步请求 false/true");
- xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 使用 setRequestHeader 来添加 HTTP 头
- xmlHttp.send(data);
- }
来源: http://www.bubuko.com/infodetail-2735205.html