Ajax入门基础01

Ajax入门

• 使用ajax技术，向后台服务器发出异步请求操作，不影响整个页面 的继续操作
• 在js中给服务器发送异步请求

//1.创建异步请求对象
var xhr = new XMLHttpRequest();
//2.打开异步请求对象，并设置参数
var username = document.getElementById("username").value;
var url = "checkUsername.do?username=tom";
xhr.open("GET",url,true);   
//3.绑定处理函数，当请求处理状态改变时，会调用该函数
xhr.onreadystatechange = function(){
//处于4状态时才可以进行取数据操作,返回状态码为200
  if(xhr.readyState == 4&&xhr.status==200){
      $("#username_msg").html(xhr.responseText);
  }  
};
//4.发出请求
xhr.send(null);

• 创建GET请求

xhr.open(“GET”,url,async);
url为完整地址：”checkUsername.do?username=”+username
async表示是否异步
true:表示发送异步请求（当Ajax对象请求时，用户仍然可以对页面进行其他操作）
false：表示发送同步请求（浏览器锁定页面，用户不能对页面进行其他操作）
- 创建POST请求

xhr.open(“POST”,url,async);
url:checkUsername.do
使用POST请求需要 设置请求的HTTP头信息
- 异步请求不会打断页面操作

//模拟在服务器产生一个异常
System.out.println(1/0);

//模拟服务器处理事件较长
    try {
        Thread.sleep(5000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }