JS与JQ与AJAX的使用

什么是Ajax

Ajax=异步JavaScript和XML
简短的说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示,
使用AJAX的应用程序案例:谷歌地图,腾讯微博,优酷视频,人人网等等

XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)
XMLHttpRequest用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,
对网页的某部分进行更新

创建XMLHttpRequest对象
所有现代浏览器(IE7+,Firefox,Chrome,Safari以及Opera)均内建XMLHttpRequest对象
request = new XMLHttpRequest();

IE5和IE6使用ActiveX对象,不支持XMLHttpRequest对象:
request = new ActiveXObject("Microsoft.XMLHTTP")

为了响应所有的现代浏览器,包括IE5和IE6,需检查浏览器是否支持XMLHttpRequest对象,如果
支持,则创建XMLHttpRequest对象,如果不支持,就创建ActiveXObject
var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest();
}else{
    request=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

request.open("GET","test1.txt",true);
request.send();

open(method,url,async)  规定请求的类型,url以及是否异步处理请求
method:请求的类型,GET或POST
url:文件在服务器上的位置
async:true(同步)或false(异步)

send(string) 将请求发送到服务器 当用post请求的时候使用string

GET还是POST?
与POST相比,GET更简单也更快,并且在大部分情况下都能用
然而在以下情况下,使用POST
1.无法使用缓存文件(更新服务器上的文件或数据库)
2.向服务器发送大量数据(POST没有数据量限制)
3.发送包含未知字符的用户输入时,POST比GET更稳定可靠

url-服务器上的文件
open()方法的url参数是服务器上文件的地址
request.open("GET","ajax.asp",true);
该文件可以是任何类型的文件,比如.txt和.xml或者服务器脚本文件,比如
.asp和.php(在传回响应之前,能够在服务器上执行任务)

异步 Ture或者False
AJAX指的是异步  JavaScript和XML
XMLHttp对象如果要用于AJAX的话,其open()方法的async参数必须设置为true
对于web开发人员来说,发送异步请求是一个巨大的进步,很多在服务器执行的任务都相当费时
AJAX出现之前,这可能会引起应用程序挂起或停止
通过AJAX,JavaScript无需等待服务器的响应而是
1.等待服务器响应时执行其他脚本
2.当响应就绪后对响应进行处理

当async=true时,规定在响应处于onreadystatechange事件中的就绪状态时执行函数:
request.onreadystatechange=function(){
    if(request.readyState==4&&request.status==200){
        document.getElementById("myDiv").innerHTML=request.responseText;
    }
}
request.open("GET","test1.text",true);
request.send();

不推荐async等于false,但是对于对于一些小型的请求,也是可以的,这时
Javascript会等到服务器响应就绪才会继续执行,如果服务器繁忙或者缓慢,应用
程序会挂起或停止.
注意:当你使用async=false时,不用写onreadystatechange函数,把代码放在send()语句后面即可
request.open();
document.getElementById("myDiv").innerHTML=request.responsetext;

服务器响应

如需获得来自服务器的响应,要使用XMLHttpRequest对象的responseText或responseXML属性
responseText 获得字符串形式的响应数据
responseXML 获得XML形式的响应数据

responseText属性
如果来自服务器的响应并非XML,请使用responseText属性
responseText属性返回字符串形式的响应,因此你可以这样用:
document.getElementById("myDiv").innerHTML=request.responseText;

responseXML属性
requestDoc=request.responseXML;
txt="";
x=requestDoc.getElementsByTagName("ARTIST");
for(int i=0;i
    txt=txt+x[i].childNodes[0].nodeValue+"
"
}
document.getElementsById("myDiv").innerHTML=txt;

onreadystatechange事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务
每当readyState改变时,就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest的状态信息

onreadystatechange: 存储函数(或函数名),每当readyState改变时,就会调用该函数
readyState: 存有XMLHttpRequest的状态,从0到4变化
            0:请求未初始化
            1:服务器连接已建立
            2:请求已接收
            3:请求处理中
            4:请求已完成,且响应已就绪
status: 200:'OK'
        404:未找到页面

在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务
当readyState等于4且状态为200时,表示响应已就绪:
request.onreadystatechange=function(){
    if(request.readyState==4 && request.status==200){
        document.getElementById("myDiv").innerHTML=request.responseText;
    }
}
说明:onreadystatechange事件被触发5次(0-4),对应着readyState的每个变化

js中AJAX完整写法

// 1.创建请求对象
var request = new XMLHttpRequest();
// 2.设置请求并发送  true代表异步 false代表同步
request.open("GET", "text.json", true);
request.send();
request.onreadystatechange = function(){
    if (request.readyState==4 && request.status==200){
      // 请求成功 打印内容
        console.log(request.responseText);
    }
}

jq中的AJAX完整写法

$.ajax({

    url:"text.json",  // 请求目标
    type:"GET", // 请求类型 POST(加密) 或者 GET(默认)
    async:true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)

    beforeSend:function(obj){
      // 在发送请求之前执行此函数
      // 作用:检查一下请求是否是想要的
      // 如果return false则取消发送
      console.log(obj);
      // return false;
    },
    cache:true, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
    // 可以把success里面的this 改变指向
    context:document.getElementsByTagName('body')[0],
    success:function(res){
        //console.log(this);
        //console.log(res);
        this.innerHTML += res;
    }
})