AJAX学习笔记

1.基于标准的一些好习惯
1.1 标签名要小写
1.2 标签必须关闭
1.3 属性名必须小写

2.
2.1 ajax下不需要使用表单来进行数据提交，因此不用写表单标签
2.2 aiax方式不需要name属性，需要一个id属性
2.3 id属性的定义dom的方式找到某个节点，进行操作
2.4 div和span的直观差异，div中的内容独占行，span中的内容和前后其它内容相处良好

3. AJAX中javasript里函数的功能
3.1 获取文本框中的内容
3.2 将文本框中的数据发送给服务器端的servlet
3.3 接收服务器端返回的数据
3.4 将服务器但返回的数据动态的显示在页面上

4.

//定义用户名校验的方法
functon verify() {
    //1.获取文本框的内容
 //Jquery的查找节点的方式：参数中#加上Id属性值可以找到一个节点
 //jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法
    var jqueryObj = $("#userName");
     //获取节点的值
    var userName = jqueryObj.val();

    //2.将文本框中的数据发送给服务器端的servlet
    //使用jquery的XMLHTTPrequet对象get请求的封装
    $.get("AJAXServer?name="+userName,null,callback);
}

//回调函数
function callback(data) {
    //3.接收服务器返回的数据
    //4.将服务器端返回的数据动态的显示在页面上
     //找到保存结果信息的节点
    var resultObj = $("#result");
     //动态的改变页面中div节点的内容
    resultObj.html(data);
}

  

5.verify函数的精简形式

function verify() {
    $.get("AJAXServer?name="+$("#userName").val(),null,function(data){
        $("#result").html(data);
    })
}

 

6.常用框架
dojo DWR  ewt mootools  prototype & script.aculo.us rico

7. 使用XMLHTTPRequest对象进行AJAX的异步交互
 

function verify(){
    //7.1 使用dom的方式获取文本框中的值，document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应的HTML页面标签，value可以获取一个元素节点的value属性值
    var userName = document.getElementById("userName").value;
    //7.2 创建XMLHttpRequest对象，这是XMLHttpRequest对象使用中最复杂的一步，需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码。
    if(window.XMLHttpRequest) {
      //7.3 针对FireFox,Mozillar,Opera,Safari,IE7,IE8
        var xmlhttp = new XMLHttpRequest();
         //7.4 针对某些特定版本的mozillar浏览器的BUG进行修正
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject){
           //7.5 针对IE6,IE5.5,IE5两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中排在前面的版本较新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i=0;i<activexName.length;i++){
            try{
   //7.6 取出一个控件名称进行创建，如果创建成功就终止循环如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
                var xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch(e){

            }
        }
    }
      //7.7 确认XMLHttpRequest对象创建成功
    if(!xmlhttp){
        alert("XMLHttpRequest创建失败！！");
        return;
    }

 

8. AJAX应用的五个步骤
8.1 建立XMLHttpRequest对象
8.2 设置回调函数
8.3 使用open方法与服务器建立链接
8.4 向服务器端发送数据
8.5 在回调函数针对不同响应状态进行处理

9. AJAX需要注意的内容
9.1 不同浏览器下XMLHttpRequest对象的不同的建立方式
9.2 设置回调函数是不要加括号
9.3 open方法三个参数含义，此外还需要注意GET方式和POST方式服务器端地址的不同写法
9.4 GET方式和POST方式send的参数的不同之处，以及POST方式下send之前需要设置请求头信息的工作
9.5 如何判断正确的响应数据已经返回，此外还要注意如何获取响应数据内容