javascript-原生和jquery请求写法

来源：互联网发布：淘宝卖家查看退款记录编辑：程序博客网时间：2024/05/19 23:25

1.原生get请求写法?

<!DOCTYPE html><html>    <head>        <meta charset='UTF-8'>        <title>get</title>    </head>    <body>        <div id='myDiv'>            <h3>AJAXGET方法</h3></div>        <button type='button' onclick='loadXMLDOC()'>数据请求</button>        <script type='text/javascript'>            function loadXMLDOC() {                var xmlhttp;                /*new ActiveXObject('Microsoft.XMLHTTP')是为了兼容ie浏览器*/                xmlhttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');                /*判断对象创建成功不*/                if(xmlhttp){                    xmlhttp.onreadystatechange = function() {                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                            document.getElementById('myDiv').innerHTML = xmlhttp.responseText                        }                    }                    xmlhttp.open('get', 'js/success.html', true);//发送请求                    xmlhttp.send();//发送到服务器                }            }        </script>    </body></html>

注意:
1.xmlhttp.responseText 将ajax的数据打印出来可以用变量存储起来然后在进行其他操作
2.async：true（异步）或 false（同步）
同步:简单说在课堂上,老师叫小明去买冰欺凌,老师在等小明买冰欺凌的这段时间处于等待回应状态(不做其他事情)，小明买冰欺凌的过程(处于服务端处理的逻辑过程),小明回到教室告诉老师冰欺凌卖光了/冰欺凌送到老师手上(服务器的返回结果)
异步:简单说在课堂上,老师叫小明去买冰欺凌,老师在等小明买冰欺凌的这段时间还可以做其他的事情比如继续上课(可以去请求其他的接口),小明回到教室告诉老师冰欺凌卖光了/冰欺凌送到老师手上(服务器的返回结果) 这样好处不影响老师上课的进度
3. xmlhttp.status
200: ‘OK’
404: 未找到页面
500:服务端出问题
304:重定向
4.xmlhttp.readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

2.原生post请求写法?

<html>    <head>        <title>html</title>        <meta charset='utf-8'/>    </head>    <body>        <form>            <p>                用户名:<input type='text' id='userVal'>                <input type='button' value='验证用户名' onclick='checkName()'/>            </p>       </form>    </body>    <script type='text/javascript'>        var openAX=null;         var val=document.getElementById('userVal');    //创建AJAX对象    function getXmlHttps(){             return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');     }    //检测ajax创建成功不    function checkName(){        openAX=getXmlHttps();        var url='returnPhp.php';        var datas='username='+val.value;        if(openAX){            //通过openAX对象发送请求到服务器的某个页面            //打开请求            openAX.open('POST',url,true);//get和post方式进行请求  true表示异步机制如果是false表示不使用异步机制              //发送请求,如果是get请求则填入null,如果是post的请求就填写实际数据            //先把处理结果放置好            openAX.setRequestHeader('Content-Type','application/x-www-form-urlencoded')                                 openAX.onreadystatechange=deal;            openAX.send(datas);//第二个参数是指定url,对某个页面发出ajax请求（本质是http的请求）        }else{            console.log('对象创建失败')        }}//  //回调函数(记载结果)    function deal(){      //我要取出      if(openAX.readyState==4){        //取出value 三种格式text,json,xml//      <!-- console.log('服务器返回的是:'+openAX.responseText);-->//      <!--打印xml  将得到一个dom对象-->//      console.log(openAX.responseXML)//      <!--dom的编程思路一个是针对html一个是xhtml             //01对xml的处理            //02先获取到xhtml然后进行xml的解析            console.log(openAX)//      var mes=openAX.responseXML.getElementsByTagName('mes');//          var s  =mes[0].childNodes[0].nodeValue;        }    }    </script></html>

php

<?php//返回数据是xml header('Content-Type:text/xml;charset=utf-8'); //不要缓存 header('Cache-Control:no-cache') //接收的数据类型post或者get $username=$_POST['userName']; $info=''; if($username=='123'){     $info='<res><mes>用户名不可用</mes></res>'; }else{     $info='<res><mes>用户名可用</mes></res>';     ////01对xml的处理    //02先获取到xhtml然后进行xml的解析            var msg=openAX.responseXML.getElementByName('msg') }echo $info;?>

3.jquery请求写法?

<html><head><script type='text/javascript' src='/jquery/jquery.js'></script><script type='text/javascript'>$(document).ready(function(){  $('#b01').click(function(){  htmlobj=$.ajax({url:'/jquery/test1.txt',async:false});  $('#myDiv').html(htmlobj.responseText);  });});</script></head><body><div id='myDiv'><h2>通过 AJAX 改变文本</h2></div><button id='b01' type='button'>改变内容</button></body></html>

参考网站:https://www.runoob.com/ajax/ajax-tutorial.html
参考网站:http://blog.csdn.net/jk110333/article/details/8983652
jquery写法:http://www.cnblogs.com/jayleke/archive/2012/08/10/2633174.html

阅读全文

0 0