ajax初步了解

一、什么是ajax
ajax可以在不加载整个网页情况下，部分更新网页内容，可以定义为javascript与xml的结合体，目前有两种实现方式，一是用原生ajax语法，二是，使用jquery封装的ajax；不管怎样都是基于javascript来实现的
二、ajax使用
1.原生ajax
XmlHttpRequest:与服务器进行交互实现网页的部分刷新，几乎目前所有浏览器都支持，IE5和IE6使用的还是ActiveXObject()
创建了XmlHttpRequest对象xmlHttp后，使用open和send方法发起网络请求
xmlHttp.open(“GET”,”URL”,”async”):三个参数分别是请求方式，地址以及是否异步
xmlHttp.send():分为有参和无参，有参代表Post请求中的请求体，一般有参只用于post请求
xmlHttp响应:
xmlHttp.responseText():代表返回内容为文本
xmlHttp.responseXml():代表返回内容为xml
xmlHttp的响应任务：
xmlHttp.onreadystatechange：当请求状态发生改变时，会触发
xmlHttp.readyState有五种状态：分别是 0=请求未初始化；1=服务器连接已建立；2=请求已经接收；3=请求处理中；4=请求已完成
xmlHttp.status:请求响应状态码 200=成功
下面来一个小栗子：
ajax代码

<script type="text/javascript">
    var xmlHttp=null;
    function loadContext(url,fuc) {
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }else{
            xmlHttp = new ActiveXObject();
        }

        xmlHttp.onreadystatechange=fuc;
        xmlHttp.open("GET",url,true);
        xmlHttp.send();
    }
    function myFunction(){
        loadContext("/ajax",function () {
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
            }
        });
    }
</script>

jsp布局

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过AJAX更新页面</button>

Servlet内容

response.setContentType("text/plain");
        response.getWriter().write("BeiJing welcome you");

2.基于jquery的ajax

常见四种方式：$.ajax;$.get ;$.post;$.getJSON

• $.ajax:jquery对ajax最近基本的封装，可以完成异步通讯的所有功能，方法列表：
  
  • method：请求方式
  • url：请求地址
  • async：是否异步
  • data：需要提交的数据
  • dataType:服务器返回数据类型，对应MIME类型
  • success:成功的回调
  • error：失败的回调
• $.get:jquery封装的get请求 与$.post方式相同
  
  • method：请求方式
  • data ： 待发送数据
  • callBack ： 成功后的回调
  • type :返回内容类型

• $.getJSON:jquery封装的请求json的请求

  • url :请求地址
  • data：请求参数
  • callBack：请求成功后的回调

  最常用的是$.ajax，可以完成我们所需要的所有异步请求

  用$.ajax继续完成上述实例，只需要我们把ajax代码换成如下即可

    function myFunction(){
        $.ajax({
            type:"GET",
            url:"/ajax",
            dataType:"text",
            success:function(result){
                document.getElementById("myDiv").innerHTML = result;
            }
        })
    }

三、小结
通过以上的总结，对ajax有了自己的认识，内容不多，但是功能挺强大的