Ajax

来源：互联网发布：js获取指定日期编辑：程序博客网时间：2024/05/22 10:43
                                                                    Ajax<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax测试get请求</title></head><body>  <form action="#">    <input type="text" name="uname" id="uname"><span id="tip"></span><br/>    <input type="button" id="btn" value="提交">  </form>  <script type="text/javascript">    //1 创建XMLHttpReqeust对象    function createXHR(){      var xhr;      //跨浏览器支持判断      if(window.XMLHttpRequest){     xhr = new XMLHttpRequest();       }      else{      xhr = new ActiveXObject("Mircrosoft.XMLHTTP");      }      return xhr;    }    //发送请求    function sendRequest(){      var name = document.getElementById('uname').value;      var xhr = createXHR();      //和服务端进行关联      xhr.open('GET','RegisterServlet?name='+name,true);      //回调函数      xhr.onreadystatechange = function(){     process(xhr);       }      //发送参数      xhr.send(null);    }    //回调函数    function process(xhr){      if(xhr.readyState==4&&xhr.status==200){    document.getElementById('tip').innerHTML =  xhr.responseText;      }    }        document.getElementById('btn').onclick = sendRequest;  </script></body></html><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax Post请求</title></head><body>  <form action="#">    <input type="text" name="uname" id="uname"><span id="tip"></span><br/>    <input type="button" id="btn" value="提交">  </form>  <script type="text/javascript">    //1 创建XMLHttpReqeust对象    function createXHR(){      var xhr;      //跨浏览器支持判断      if(window.XMLHttpRequest){     xhr = new XMLHttpRequest();       }      else{      xhr = new ActiveXObject("Mircrosoft.XMLHTTP");      }      return xhr;    }    //发送请求    function sendRequest(){      var name = document.getElementById('uname').value;      var xhr = createXHR();      //和服务端进行关联      xhr.open('POST','JSONServlet',true);      //回调函数      xhr.onreadystatechange = function(){     process(xhr);       }      //POST请求必须添加以下代码：      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");      //发送参数:POST方式参数键值对必须写在send方法中      xhr.send('name='+name);    }    //回调函数    function process(xhr){      if(xhr.readyState==4&&xhr.status==200){    //转换json字符串为一个js对象    var user =  JSON.parse(xhr.responseText);     document.getElementById('tip').innerHTML =  user.name +"=="+user.pass;      }    }        document.getElementById('btn').onclick = sendRequest;  </script></body></html><!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery Ajax测试</title><script type="text/javascript" src="js/jquery.js"></script></head><body>  <form action="#">    <input type="text" name="uname" id="uname"><span id="tip"></span><br/>    <input type="button" id="btn" value="提交">  </form>  <script type="text/javascript">        $(document).ready(function(){      $('#btn').on('click',function(){      /*      $.ajax({     'url':'RegisterServlet',     'data':{'name':$('#uname').val()},     'success':function(data){     document.getElementById('tip').innerHTML = data;      },     'error':function(XMLHttpRequest, textStatus, errorThrown){    alert(textStatus);      }     });     */        $.get('RegisterServlet',"name="+$('#uname').val(),function(data){        document.getElementById('tip').innerHTML = data;         });      });        });     </script></body></html>
阅读全文
0 0