Ajax学习心得

心已赠人 2022-06-04 03:45 203阅读 0赞

最近学习了Ajax的实现做笔记以便以后查询  
通常用from表单进行提交请求的时候，画面会刷新，Ajax的特点在于提交请求的时候不会跳转界面，并且结合DOM可以使返回的值动态在本页面添加  
Ajax的实现：  
1、创建一个Ajax对象：  
针对 IE7+, Firefox, Chrome, Opera, Safari的浏览器使用如下方式即可

var Ajax = new XMLHttpRequest();

对于IE6, IE5浏览器需要用：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

此处可以用一个if判断进行对Ajax对象的创建,整段代码如下：

2、打开链接

//get方式
    var url = "./Test";
    Ajax1.open("GET", url, true);
    //此处只是访问了一下url，若需要传参则在url中加入信息

//post方式
    xmlhttp.open("POST","./Test",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

get和post方式的区别在于：  
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。  
然而，在以下情况中，请使用 POST 请求：  
无法使用缓存文件（更新服务器上的文件或数据库）  
向服务器发送大量数据（POST 没有数据量限制）  
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠  
3、发送数据

//post方式: post请求中，在send中加入自己要发送的数据
    Ajax1.send("fname=Henry&lname=Ford");
    
    //get方式:get请求中，数据是写在url中的，只需要发送就可以
    Ajax1.send();

4、接受响应

//onreadystatechange是XMLHttpRequest中提供的一个事件当readyState 的值发生改变时会自动调用
    /** readyState的值表示了当前请求的状态： 0：尚未初始化 1：正在加载 2：加载完毕 3：正在处理 4：处理完毕。 当readyState的值变为了4就证明服务器已经响应完毕 */
    Ajax1.onreadystatechange = function() {
        if (Ajax1.readyState == 4) {
            alert(Ajax1.status);
            if (Ajax1.status == 200) {
                alert(Ajax1.responseText);
            } else {
            //如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。 
                alert("网络连接中断！");
            }
        }
    }

以上为ajax请求和响应的整个过程，在用get方式尝试的时候发现一个坑：  
readyState已经等于4了，但是status却是0，无论是从tomcat发布的文件还是本地都无法访问成功。后来将url改为本地就成功了。查阅了很多资料可能是因为跨域访问的问题，因为没有设置跨域访问，所以会显示0