关键词：
自从javascript有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但是有的项目不需要加载jquery这种庞大的js插件，只需要实现ajax即可。所以我们就需要自己用原生JS实现ajax
ajax：一种请求数据的方式，不需要刷新整个页面；
ajax的技术核心是 XMLHttpRequest 对象；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；
<script type="text/javascript">
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || ‘POST‘;
opt.url = opt.url || ‘‘;
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
var params = [];
for (var key in opt.data){
params.push(key + ‘=‘ + opt.data[key]);
}
var postData = params.join(‘&‘);
if (opt.method.toUpperCase() === ‘POST‘) {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded;charset=utf-8‘);
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === ‘GET‘) {
xmlHttp.open(opt.method, opt.url + ‘?‘ + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}
</script>
示例：
<script>
ajax({
method: ‘POST‘,
url: ‘login.php‘,
data: {
code:‘p001‘,name:‘李四‘
},
success: function (response) {
console.log(response);
}
})
</script>
原生js实现ajax
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Examples</title><metaname="description"content=""><metaname="keywords"content=""><linkhref=""ty 查看详情
原生js实现ajax方法
下面是一个比较完整的Ajaxfunctionajax(){varajaxData={type:arguments[0].type||"GET",url:arguments[0].url||"",async:arguments[0].async||"true",data:arguments[0].data||null,dataType:arguments[0].dataType||"text",co 查看详情
原生js实现ajax请求
...符发送到服务器，然后服务器返回一个搜索建议的列表。原生的Ajax原生的Ajax请求离不开XHR对象，即XMLHttpRequest对象。所有现代浏览器都内建有这个对象。创建整个对象：varx 查看详情
封装原生js实现ajax
1functioncreateXHR(){2if(window.XMLHttpRequest){3//IE7+、Firefox、Opera、Chrome和Safari4returnnewXMLHttpRequest();5}elseif(window.ActiveXObject){6//IE6及以下7varversions=[‘MSXML2.XMLHttp‘,‘Microsoft.XMLHTTP‘ 查看详情
原生js实现ajax
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情
javascript原生js实现ajax(代码片段)
[javascript]原生js实现ajax(代码片段)
一.首先看JQuery提供的Ajax方法： $.ajax(url:,type:‘‘,dataType:‘‘,data:,success:function(),error:function()) 二.原生js实现Ajax方法： varAjax=get:function(url,fn)//XMLHttpRequest对象用于在后台与服务器交换数据var 查看详情
使用原生js实现简单的ajax
Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术。它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互，所以可以实现局部内容的刷新。ajax的实现，主要是靠javascript中的内置对象XMLHttpRequest。... 查看详情
原生js实现ajax及ajax的跨域请求
...苏算是JQuery的Ajax了。但是，今天，影子向大家介绍的是原生js的Ajax，及跨域请求。 查看详情
原生js实现ajax
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情
原生js实现ajax的文件异步提交功能图片预览功能.实例
<%--CreatedbyIntelliJIDEA.User:yhDate:2016/12/14Time:17:13TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><%@includef 查看详情
用原生js实现ajaxjsonp
一、原生js实现ajax$.ajax({url:‘‘,type:‘post‘,data:{name:‘zhaobao‘,age:20},dataType:‘json‘,success:function(data){},error:function(){}})functionajax(options){options=options||{};options.type=(options.type||" 查看详情
javascript实现原生ajax
...到ajax这种功能该如何办呢？下面和大家分享javascript实现原生ajax的方法。 实现ajax之前必须要创建一个XMLHttpRequest对象。如果不支持创建该对象的浏览器，则需要创建ActiveXObj 查看详情
ajax_原生ajax写法理解异步请求js单线程+事件队列封装原生ajax
1、原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新 1、隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面... 查看详情
ajax概述原生js(getpost)的实现及ajax函数封装(代码片段)
文章目录Ajax概述Ajax对象Get、Post请求方式的底层实现Ajax函数的封装Ajax概述传统网站中存在的问题：网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果一项内容不合格，需要重新填写所有表单... 查看详情
原生js实现ajaxjsonp及dom加载完成事件
一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是XMLHttpRequest对象；ajax请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接收响应数据；下面简单封装一个函数，之后稍作解释ajax({url:"./Test... 查看详情
原生javascript中使用ajax实现异步通信
...身的书写顺序,相反则为同步.以下开始简单介绍一下使用原生JS来如何实现AJAX异步通信第一步:创建一个能够实现异步请求的对象 newXMLHttpRequestvarxhr=newXMLHttpRequest();console.l 查看详情
第110天：ajax原生js封装函数
一、Ajax的实现主要分为四部分：1、创建Ajax对象1//创建ajax对象2varxhr=null;3if(window.XMLHttpRequest){4xhr=newXMLHttpRequest();5}else{6//为了兼容IE67xhr=newActiveXObject(‘Microsoft.XMLHTTP‘);8}2、连接服务器//连接服务器open(方法GET/POST，请求地址， 查看详情