笔记----Ajax的get与post

Get请求

数据量有限制，隐私暴露在地址栏，不安全。

栗子：
HTML代码：

用户名称：<input type="text" name="" value="" id="txtName">        <span id="txtNameTip">**</span>

JavaScript代码：

//获得XMLHttpRequest对象，分IE5.5--IE6 和 IE7以上Chrome、FF...两大类function getXhr(){  var xhr = null;  if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();  }else{    xhr = new ActiveXObject("Microsoft.XMLHttp");  }  return xhr;}$(function(){  $("#txtName").blur(function(){    //获取xhr    var xhr = getXhr();    //创建请求    var name = $("#txtName").val();    var url = "checkName.php?name=" + name;    xhr.open("get",url,true);    //状态变化    xhr.onreadystatechange = function(){      if(xhr.readyState == 4 && xhr.status == 200){        $("#txtNameTip").html(xhr.responseText);      }    }    //发送请求    xhr.send(null);  });

PHP代码：

<?php  //用接受的数据与admin进行判断  //接收用户提交的数据  $name = $_REQUEST["name"];  if($name=="admin"){    echo "用户名已存在";  }else{    echo "通过";  } ?>

页面：

注意点：
使用get请求，xhr.send(null) 中一定要定参数null。
需要传的参数在url中拼接。

post请求

数据量没有限制，隐私不会暴露在地址栏，安全。

栗子：
HTML代码：

用户名称：<input type="text" name="" value="" id="txtName">        <span id="txtNameTip">**</span>

JavaScript代码：

function getXhr(){  var xhr = null;  if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();  }else{    xhr = new ActiveXObject("Microsoft.XMLHttp");  }  return xhr;}$(function(){  $("#txtName").blur(function(){    //获取xhr    var xhr = getXhr();    //创建请求    var name = $("#txtName").val();    var url = "checkName.php";     //与get请求不一样的地方      xhr.open("post",url,true);    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");      //与get请求不一样的地方    //状态变化    xhr.onreadystatechange = function(){      if(xhr.readyState == 4 && xhr.status == 200){        $("#txtNameTip").html(xhr.responseText);      }    }    //发送请求    xhr.send("name=" + name);    //与get请求不一样的地方    });

PHP代码与get请求相同。

结果也与get请求相同。

注意：

使用post请求，参数写在xhr.send()方法内，多个参数用 “&” 符号相连接。
使用post请求，一定记住要手动设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
代码在创建请求和发送请求之间均可。

AJAX请求大致的四步：

1. 得到XMLHttpRequest对象。
2. 创建请求。xhr.open(method,url,aysn);
3. 设置回调函数：指定xhr.onreadystatechange事件
4. 发送请求。xhr.send();