JQuery学习笔记（4）——ajax

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

原生

例子

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

使用 AJAX 修改文本内容
修改内容

参考链接菜鸟教程

XMLHttpRequest对象

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

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有两种状态

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

服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML属性可以获得来自服务器的响应数据

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

JQuery实现ajax

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

最基本的ajax方法

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文档