ajax(post)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <script>
       document.querySelector('#btnAjax).onclick = function(){
           //发送ajax需要五步
           //创建异步对象
           var ajaxObj=new XMLHttpRequest();
           //设置请求的URL
           ajaxObj.open('post','01.php');
           //如果使用post发送数据必须舍子如下内容：
           //修改了发送给请求服务器发送的报文的内容
           ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
           //发送请求
           //post请求发送的数据以字符串的方式写在send中
           ajaxObj.send('name=jack&age=998');
           //注册事件
           //onreadystatechange 状态改变就会调用
           //如果要在数据完美请求回来的时候在调用我们需要手动写判断逻辑
           ajaxObj.onreadystatechange=function(){
               //为了保证数据完整，我们一般会判断两个值
               if(ajaxObj.readyState==4&&ajaxObj.status==200){
                   //如果能进到这里面数据才是完整的
                   //在注册的事件中获取返回的内容并修改页面的显示
                   //数据是保存在异步对象中
                   console.log(ajaxObj.responseText);
               }
           }
           //在注册的事件中获取返回的内容并修改页面的显示
       }
   </script>
   <body>
       <h1>AjaxPost请求</h1>
       <input type="text" value="" placeholder="请输入您的数据"id="foodText" />
       <input type="button" value="ajaxPost请求" id="btnAjax" />
   </body>
</html>

本文属于学习笔记，只做于学习

猜你喜欢