//原生js写ajax就像打电话

//打电话分下面4步
//1.拿出手机
//2.拨号
//3.说话
//4.挺对方说话

//ajax也分下面4步
//1.创建ajax对象
//2.连接到服务器
//3.发送请求(告诉服务器我要什么文件)
//4.接收返回值

下面是原生js写ajax的具体写法

<script>
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
//1.创建ajax对象
//只兼容非ie6的浏览器,在ie6浏览器上运行会提示没有被定义
//var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
//alert(oAjax); //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用,会报错。
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax); //鉴于上面出现的问题,可以采取下面的方法解决,用if判断是否为IE6浏览器
if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6浏览器。()里面加window的原因下面会有描述。
{
var oAjax = new XMLHttpRequest();//创建ajax对象
}
else//如果没有XMLHttpRequest,那就是IE6浏览器
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
} //2.连接服务器
//open(方法、文件名、异步传输)
//方法:
//传输方式是get方式还是post方式。
//文件名
//告诉服务器要读哪个文件
//异步传输
//异步:多件事一件一件的做
//同步:多件事情一起进行
//但是js里面的同步和异步和现实的同步异步相反。
//同步:多件事一件一件的做
//异步:多件事情一起进行
//ajax天生是用来做异步的 oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。 //3.发送请求
oAjax.send(); //4.接收返回
//客户端和服务器端有交互的时候会调用onreadystatechange
oAjax.onreadystatechange=function()
{
//oAjax.readyState //浏览器和服务器,进行到哪一步了。
//0->(未初始化):还没有调用 open() 方法。
//1->(载入):已调用 send() 方法,正在发送请求。
//2->载入完成):send() 方法完成,已收到全部响应内容。
//3->(解析):正在解析响应内容。
//4->(完成):响应内容解析完成,可以在客户端调用。
if(oAjax.readyState==4)
{
if(oAjax.status==200)//判断是否成功,如果是200,就代表成功
{
alert("成功"+oAjax.responseText);//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容
}
else
{
alert("失败");
}
}
};
}
}; /*//上面if里面需要些window的原因
//js里面的变量和属性 var a = 12;
alert(a);//页面上弹出12很正常,而实际上输出的是下面的写法,是属于window的,只是window能省就省了。
alert(window.a);//输出结果是一样的
window.alert(window.a); //想a这种全局变量实际上是winow的一个属性。
//如果不定义一个变量a直接像下面那样输出a
alert(a)//系统会报错,而不是undefind,因为没有定义变量a。
alert(window.a);//如果是这样写,系统就不会报错了,会显示undefind。 //出现上面的原因是因为直接写a从根上就找不到a,而前面加上window只是找不到window的属性a了。*/ </script>

但是,不能每次用ajax的时候都写那么多代码,要把这段ajax代码封装起来,方便使用。

封装ajax

//最后把代码封装起来,封装起来以后,要给这个函数加上一个参数url.参数是为了替换要读取的文件名
function ajax(url,fnSucc)
{
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
oAjax.open("GET",url,true);//把要读取的参数的传过来。
oAjax.send();
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
fnSucc(oAjax.responseText);//成功的时候调用这个方法
}
else
{
if(fnfiled)
{
fnField(oAjax.status);
}
}
}
};
}

将封装的ajax调用

<script src="new_ajax.js"></script>//引用封装的ajax文件
<script>
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
ajax('a.txt',function(str){//读取a.txt文件里面的内容
alert(str);//将读取的内容输出
})
}
}; </script>

原生js写Ajax的更多相关文章

  1. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  2. 原生JS写Ajax的请求函数

    一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 原生js写ajax请求(复习)

    今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...

  4. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  5. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  6. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  7. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  8. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  9. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

随机推荐

  1. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  2. [转]Direct3D 11 Tessellation Tutorial

    The new hardware tessellation feature available on Direct3D 11 video cards has great potential, but ...

  3. 29 GroupSock(NetAddressList)——live555源码阅读(四)网络

    29 GroupSock(NetAddressList)——live555源码阅读(四)网络 29 GroupSock(NetAddressList)——live555源码阅读(四)网络 简介 Net ...

  4. 图片按钮来代替文件上传控件(Freemaker,JQuery,HTML,CSS,JavaScript)

    CSS样式: <style type="text/css"> .fileInputContainer{ height:70px; width:95px; positio ...

  5. jmeter linux使用经验小结

    1. 确认务必安装了JDK,并且把路径配置OK.否则执行会报错. 2. 当做负载机时,在hosts 配置上    你的ip   你的hostname  或者使用./bin/jmeter-server ...

  6. Jetty 8长连接上的又一个坑

    Jetty 8 长连接的超时断开连接的机制:超时连接机制针对IO传输过程中的数据阻塞时间超过一定阈值时,断开该连接.阻塞指当前处于数据传输阶段,但是连续指定时间内都没有发出或者接收到任何数据时,Jet ...

  7. asm.uew

    /L16"ASM" Nocase Line Comment = ; File Extensions = ASM INC DEF /Colors = ,,,,, /Colors Ba ...

  8. 【中英对照】【EntLib6】【Unity】实验1:使用一个Unity容器

    Lab 1: Using a Unity Container 实验1:使用一个Unity容器 Estimated time to complete this lab: 15 minutes 估计完成时 ...

  9. Android之事件分发

    网上总结的很详细了,有时间总结下做个笔记

  10. 使用MagickNet编辑图片

            ImageMagick是一个免费的创建.编辑.合成图片的软件.它可以读取.转换.写入多种格式的图片.图片切割.颜色替换.各种效果的应用,图片的旋转.组合,文本,直线,多边形,椭圆,曲线 ...