JQuery学习笔记（4）——ajax

时间 2019-12-05

标签 jquery 学习笔记 ajax 栏目 JQuery 繁體版

原文原文链接

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）html

原生

例子

点击按钮，访问服务器上的ajax_info.txt文件，得到txt文件的内容，并修改显示的文本jquery

<!DOCTYPE html>
<html>
<head>
<script>
    var xmlhttp;//xmlhttp对象
    function loadXMLDoc(url,cfunc){
        //不一样的浏览器，或得xmlhttp对象所调用的方法不一样
        if (window.XMLHttpRequest){
            // IE7+, Firefox, Chrome, Opera, Safari 
            xmlhttp=new XMLHttpRequest();
        }else{
            // IE6, IE5 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //回调函数
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }
    function myFunction(){
        //访问服务器上的/try/ajax/ajax_info.txt，并回调函数
        loadXMLDoc("/try/ajax/ajax_info.txt",function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        });
    }
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>

参考连接菜鸟教程ajax

XMLHttpRequest对象

ajax的核心对象，是服务器和客户端中间的桥梁，客户端向服务器发送请求和客户端得到服务器响应都是经过此对象的属性和方法来进行。json

var xmlhttp;
//window.XMLHttpRequest不为空，就是true
if (window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

open(method,url,async) 链接服务器
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步），推荐使用异步
send(string) 发送请求
若是请求方式为get，send中的参数能够省略不写

onreadystatechange事件

xmlhttp对象有两个属性readyState和status浏览器

当readyState发生改变，就会触发onreadystatechange事件服务器

readyState有如下几种状态异步

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

status有两种状态async

200: "OK"
404: 未找到页面

服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML属性能够得到来自服务器的响应数据函数

responseText 得到字符串形式的响应数据。
responseXML 得到 XML 形式的响应数据。

JQuery实现ajax

1. $.ajax(url,[settings])

最基本的ajax方法post

2. `load(url,[data],[callback])`

从服务器载入数据而且将返回的HTML代码并插入至匹配的元素中。
data是传递给服务器的数据参数 ,能够是一个普通的对象或字符串
提供了一个回调函数complete(responseText, textStatus, XMLHttpRequest)，当HTML代码并插入至匹配的元素中就会被调用

$('#mydiv').load("test.html");

//这里的first.html是当前同级目录的一个html文件
$('#mydiv').load('first.html',function (data,status) {
    console.log(data);
    console.log(status);//状态，成功为success,失败则为error
});

3. $.get(url,[data],[fn],[type])

使用一个HTTP GET请求从服务器加载数据

//这里实现的效果与上面的load一致
$.get("first.html",function(data){
    $('#mydiv').html("test.html");
});

4. $.post(url,[data],[fn],[type])

使用一个HTTP POST请求从服务器加载数据，与上面get相似

5. $.getJSON(url,[data],[fn])

得到json数据并自动解析自动解析

$.getJSON("test.js", function(json){
    console.log(json.users[3].name);
});

6. $.getScript(url,[callback])

使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

参考连接：jQuery文档