AJAX 请求简讯

应用AJAX的流程：
1、定义一个事件处理器
2、获取XMLHTTPRequest，并将事件处理器注册给它
3、与服务器连接
4、发送信息
5、服务器返回处理完毕的信息
6、每当XMLHTTPRequest的状态发生变化，自动触发事件处理器
7、事件处理器动态更新页面

//原生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.接收返回//客户端和服务器端有交互的时候会调用onreadystatechangeoAjax.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 请求简讯相关推荐

ajax发送动态字符传,如何发送ajax请求文件与其他字符串的变量？
我想创建ajax调用并发送数据与文件和其他变量,我也使用django,如果它的帮助.如何发送ajax请求文件与其他字符串的变量? 我尝试: js文件: $("#save-new-reques ...
为什么ajax请求状态码为0,ajax请求状态码为0的解决办法
原文链接:https://blog.csdn.net/changqing5818/article/details/53932463 前言今天遇到个奇怪的问题,使用JQuery的ajax请求,后台的C ...
关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题...
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
jQuery发送含有数组参数的ajax请求以及后台Struts2的OGNL解析错误
当使用jquery1.3以上版本时,进行ajax参数传值时,会出现以下的一个错误: ognl.ExpressionSyntaxException: Malformed OGNL expression: ...
ajax请求必须打断点才能成功,Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）...
以前写过一个程序,发现用断点调试的时候,一步步的运行,程序是可以的,但是去了断点程序就出现了问题. $(document).ready(function(){ var arra=new Array() ...
python的flask框架显示柱状图_使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)...
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
axios不发起请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与 ...
利用闭包实现多次ajax请求只执行最后一次
点一个按钮,则向服务器请求资源,不作处理时,多次点击后会有很多个请求在等待.我们知道一般我们用ajax是异步请求,那么我们快速重复点击一个按钮得到的结果其实我们并不知道是哪次点击的结果可能是第一次可能 ...

AJAX 请求简讯

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

AJAX 请求简讯相关推荐

最新文章

热门文章