KKB : Ajax技术和原理、Ajax编程步骤

Ajax技术和原理

Ajax中的 X : 指的是XML

Ajax不是新的编程语言，而是一种使用现有标准的新方法

在不重新加载整个页面的情况下，Ajax是与服务器交换数据并更新部分网页的技术

 

 

Ajax编程步骤

1. 创建XMLHttpRequest对象
2. 设置请求方式
3. 调用回调函数
4. 发送请求（get/post）

 

步骤一、创建XMLHttpRequest对象

 

一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果是IE则创建ActiveX对象

//第一步:创建XMLHttpRequest对象
var xmlHttp; 
if (window.XMLHttpRequest){
    //非IE
    xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXobject) 
    //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

步骤二、设置请求方式

 

XMLHttpRequest对象的open()方法就是来设置请求方式的。

open()方法一共有三个参数

参数1∶设置请求类型(GET或POST)
参数2:文件在服务器上的位置;
参数3:是否异 步处理请求，是为true，否为false。 

eg: xmlHttp.open("POST", URL , true)

 

步骤三、调用回调函数

 

什么是回调函数？  就是请求在后台处理完，再返回到前台所实现的功能

 

if(ajax.readystate == 4 && ajax.status == 200){。。。。);}

 

//第三步:注册回调函数
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readystate == 4) { // 4:表示请求已完成
        if (xmlHttp.status == 200){
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        }else {
            alert("AJAX服务器返回错误! ");
         }
    }
}

 

 

步骤四、发送请求

分为get请求和post请求

 

① 演示 get请求的发送

页面的内容：当用户输入用户名时，不用点击提交（也点不了提交。。）就提示用户该用户名是否可用

js代码

servlet的代码

效果图：

          

 

 

 

②演示 post 方式请求

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据。

值得强调的是：get请求的中发送信息携带在地址栏里，所以写的是null

而post请求：你发送什么信息就需要写在括号里

 

servlet服务器端 不需要改变