笔记: AJAX

2018-01-25

阅读量

× 文章目录

1. 概念：

概念：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 Question： 当注册一个网页的时候，填写完用户名，文本框刚刚失去焦点，马上提示该用户已经被注册。这肯定是访问了后台，但是页面也没有刷新呀。一般是用了AJAX。不重新加载整个页面的情况下与服务器进行交互。 语法： 1. JavaScript：

function getInfo()
{
    var xmlhttp;
    if (window.XMLHttpRequest){
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }else{	// IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
                 var str = xmlhttp.responseText;
                 alter(str);
        }
    }
    xmlhttp.open("GET","/url",true);
    xmlhttp.send();
}

代码解释：(以Java为例！) 首先是执行最下面的xmlhttp.open();之后发送给服务器处理，处理完成后执行onreadystatechange=function(){} ，在其中操作。 xmlhttp.open()的三个参数分别是：执行get/post方法，访问的URL地址，是否为异步请求。第一个参数： GET，xmlhttp.open("GET","/url",true); 向服务器发送数据就只能在URL中带过去，/url?data=123; POST ，xmlhttp.open("POST","/url",true); 向服务器发送数据方法，需要设置一下请求头, setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //``以form表单的形式提交，后台就可以像接受form表单数据一样接受数据。 xmlhttp.send("data=123");再向服务器发送数据。第二个参数: /url 访问服务器的servlet。第三个参数: true 为异步操作，方法写在onreadystatechange=function(){}中。 false为同步操作, 方法直接写在send的后面，不需要onreadystatechange 解释：xmlhttp.readyState==4 readyState从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status为访问状态，404 页面没找到， 500 内部错误， 200访问正常等。

1xx -消息: 请求正在处理，请稍后。。。
2xx -成功处理
3xx -重定向到其他地方: 需要客户端再次发送请求
4xx -客户端错误，eg: 非法的资源请求，禁止访问
5xx -服务器段错误，eg: 服务器抛出异常

在Java中将处理结果的字符串，一般是以JSON字符串返回，存储在前端xmlhttp.responseText中。 2. jQuery写法： jquery将上述写法进行了封装，使得我们更加简单和方便的去使用ajax。常见用法：

$.ajax(function(){
type: “post”,
url : “url”,
data: {“name”:”Peter”},
success:function(data, status){
//处理
},
error:function(){
//error有三个参数，可以依据情况需要写
}
});

jquery还专门封装了$.get() 和 $.post()的ajax用法，分别执行get和post。