【AJAX 教程】JS 原生 AJAX 请求
JS 原生 AJAX 请求
目录
AJAX 简介
一、JS 原生 AJAX 请求
实现 AJAX 的基本步骤
XMLHttpRequest 对象
XMLHttpRequest 对象方法
1、创建 XMLHttpRequest 对象
2、设置响应 HTTP 请求状态变化的函数
onreadystatechange 事件
3、向服务器发送请求
GET 请求
POST 请求
Content-type常见类型：
4、服务器 响应
完整实例
总结
相关文章 【AJAX 教程】Jquery 实现 AJAX 请求的三种方式
AJAX 简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
一、JS 原生 AJAX 请求
实现 AJAX 的基本步骤
要完整实现一个AJAX 异步调用和局部刷新，通常需要以下几个步骤：
创建XML HttpRequest 对象，即创建一个异步调用对象。
创建一个新的HTTP 请求，并指定该HTTP 请求的方法，URL及验证信息
设置响应HTTP请求状态变化的函数。
发送HTTP 请求。
获取异步调用返回的数据。
使用JavaScript和DOM 实现局部刷新
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) | 规定请求
|
| send() | 将请求发送到服务器，用于 GET 请求 |
| send(string) | 将请求发送到服务器，用于 POST 请求 |
| setRequestHeader() | 向要发送的报头添加标签/值对 |
1、创建 XMLHttpRequest 对象
AJAX 的核心是 XMLHttpRequest 对象。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
// 创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("您的浏览器不支持此功能。")
}2、设置响应 HTTP 请求状态变化的函数
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" , 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//响应成功后要执行的操作
}
}3、向服务器发送请求
-
GET 请求
get 发送请求时，需要传给后台的数据通过 url 来传递，多个参数之间使用 & 符号连接，使用时如下：
xmlhttp.open("GET","ajax.php?name=hello&age=world",true);
xmlhttp.send();-
POST 请求
使用 post 方式发送请求时，使用send来发送数据，有时需要设置数据格式，类似表单那样，此时可通过 setRequestHeader 设置发送的数据格式
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=hello&age=world");Content-type常见类型：
常见的媒体格式类型如下：
text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式
以application开头的媒体格式类型：
application/xhtml+xml ：XHTML格式
application/xml： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json： JSON数据格式
application/pdf：pdf格式
application/msword ： Word文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ：
另外一种常见的媒体格式是上传文件之时使用的：
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
4、服务器 响应
通常我们需要获取服务器返回的信息，然后对我们的网页做相对应的结果展示。
通常使用 XMLHttpRequest 的 responseText 或 responseXML 属性。(responseXML 目前已被 json 取代)。
responseText ===> 获取到的是字符串形式。接收到可直接使用，无需转换。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;responseXML ===> 获取到 XML 形式的数据。使用时需要解析，如下：
获取到的 XML 数据:
小朋友
18
解析时:
document.getElementsByTagName("name")[0];
document.getElementsByTagName("name")[1];完整实例
JavaScript 原生 AJAX 请求
ajax.json 文件内容如下：
{
"title":"JavaScript 原生 AJAX 请求",
"slogan":"学的不仅是技术，更是梦想"
}总结
以上就是今天要讲的内容，本文仅仅简单介绍了 JavaScrpit 中 AJAX 的使用，后期会发布如何使用 Jquery 发送 AJAX 请求。如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要几行简单的代码，就可以实现 AJAX 功能