AJAX原理分析

AJAX即"Asynchronous JavascriptAnd XML ”（异步JavaScript和XML)可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新（局部刷新）。传统的网页（不使用 AJAX)如果需要更新内容，必须重载整个网页页面。比如说在你注册登录某一个app时候，你需要填写手机号和密码，当你填写完手机号，页面会自动发请求去数据库中查找此手机号是否已注册过，给出相应的反应。简单的来说就是:不刷新页面的情况下，自动发出请求

AJAX：异步JavaScript和XML,是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。

---

AJAX原理分析

1.使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象）

2通过AJAX引擎确定请求路径和请求参数

3通知AJAX引擎发送请求

AJAX引擎会在不刷新浏览器地址栏的情况下，发送请求

1服务器获得请求参数

2服务器处理请求参数（添加、查询等操作）

3服务器响应数据给浏览器

AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面。

1通过设置给AJAX引擎的回调函数获得服务器响应的数据

2使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。

 JavaScript AJAX使用流程

（get和post会有细微差别）

1.获得ajax引擎

2.设置回调函数

3.确定请求路径

4.发送请求

//get为例
<script type ="text/ javascript ">
     function sendGet () {
             //获得ajax引擎
             var xmlhttp = new XMLHttpRequest();
             //设置回调函数
             xmlhttp.onreadystatechange = function () { 
             //xmlhttp. readyState 是有5种状态
             //0：请求未初始化(还没有调用 open())
　　         //1：请求已经建立，但是还没有发送（还没有调用 send()）
　　         //2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
　　         //3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
　　         //4：响应已完成；您可以获取并使用服务器的响应了。
                if (xmlhttp. readyState == 4){
                    if (xmlhttp.status == 200) { 
                        alert ( "响应数据" + xmlhttp.responseText);
                    }
                };
             //确定请求方式，路径及参数
             xmlhttp. open ("GET" , "/sss/he110Serv1et?username = jack&password = 1234 " 
             //发送请求
             xmlhttp. send (null)
< / script>
< input type ="button" onclick ="sendGet()" value= "get请求" / > <br/>





//当为post时：
<script type = "text/ javascript ">
     function sendPost() {
             //获得ajax引擎
             var xmlhttp = new XMLHttpRequest();
             //设置回调函数
             xmlhttp.onreadystatechange = function () {  
                if (xmlhttp. readyState == 4){
                    if (xmlhttp.status == 200) { 
                        alert ( "响应数据" + xmlhttp.responseText);
                    }
                };
             //确定请求方式，路径及参数
             xmlhttp. open ("POST" , "/sss/he110Serv1et" );
             //设置请求编码
             xmlhttp.setRequestHeader("contebt-type","application/x-www-form-urlencoded");
             //发送请求
             xmlhttp. send (username="阿三"&password="123456");
< / script>
< input type ="button" onclick ="sendPost()" value= "post请求" / > <br/>

XMLHttpRequest对象浏览器兼容

function getXMLhttp(){
    var xmlhttp=null;
    //谷歌，火狐，IE最新浏览器
    if（window.XMLHttpRequest）{
        xmlhttp=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        //IE老版浏览器（IE6，7,8等）
        new ActiveXObject("Microsoft.XMLHttp");
    }
}

$.post()和$.get()

格式：

jquery.post(url,[data],[challback],[type])

参数1：url，请求路径

参数2：data，请求参数

参数3：callback，回调函数

参数4：type，返回内容格式，xml，htmlscript，json，text，_default

服务器响应编码为：application/json;charset=UTF-8,回调函数data类型是json对象

服务器响应编码为：text/html;charset=UTF-8,回调函数data类型是字符串。

$.get()以get请求方式发送ajax

除了请求方式不同，使用方式与$.post()完全一致