创建ajax的过程
step1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象;
step2. 创建一个新的HTTP请求,并指定改HTTP请求的方法、URL以及验证信息;
step3. 设置响应HTTP状态变化的函数;
step4. 发送HTTP请求;
step5. 获取异步调用返回的数据;
step6. 使用javascript和DOM实现局部刷新;
代码实现:
1 <script type="text/javascript"> 2 window.onload = function(){ 3 //第一步:创建xhr对象 4 //xhr是一个对象;里面可以放很多东西,数据; 5 var xhr = null; 6 if(window.XMLHttpRequest){//标准浏览器 7 xhr = new XMLHttpRequest();//创建一个对象 8 }else{//早期的IE浏览器 9 xhr = new ActiveXObject('Microsoft.XMLHTTP');//参数是规定的; 10 } 11 console.log("状态q"+xhr.readyState);//0 12 //第二步:准备发送请求-配置发送请求的一些行为 13 //open即打开链接,第一个参数是以什么方式;第二个是往哪儿发送请求,第三个可以不写,默认true,表示异步,false表示同步;; 14 xhr.open('get','03form.php',true); 15 console.log("状态w"+xhr.readyState);//1 16 17 //第三步:执行发送的动作 18 //send也可以写在前面,推荐写在后面;写null是兼容问题; 19 xhr.send(null); 20 console.log("状态e"+xhr.readyState);//1 21 22 //第四步:指定一些回调函数,也属于事件函数;不触发不执行,触发条件是xhr.readyState;z这个值有0-4,共5个状态,是由浏览器控制的; 23 xhr.onreadystatechange = function(){ 24 if(xhr.readyState == 4){//4指服务器返回的数据可以使用; 25 if(xhr.status == 200){ //判断已经成功的获取了数据;200表示hTTP请求成功;404表示找不到页面;503表示服务器端有语法错误; 26 var data = xhr.responseText;//json,文本,主角; 27 // var data1 = xhr.responseXML; 28 } 29 } 30 // console.log("状态t"+xhr.readyState);//2表示已经发送完成; 31 32 // console.log(1234); 33 } 34 35 // console.log(456); 36 console.log("状态r"+xhr.readyState);//1 37 38 39 } 40 </script>
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;