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)	规定请求 method：请求类型 GET 或 POST url：服务器文件位置 async：true（异步）或 false（同步） 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 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" , 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
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 ： <form encType="">中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格式

4、服务器响应

通常我们需要获取服务器返回的信息，然后对我们的网页做相对应的结果展示。

通常使用 XMLHttpRequest 的 responseText 或 responseXML 属性。(responseXML 目前已被 json 取代)。

responseText ===> 获取到的是字符串形式。接收到可直接使用，无需转换。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML ===> 获取到 XML 形式的数据。使用时需要解析，如下：

获取到的 XML 数据:<student><name>小朋友</name><age>18</age> </student>

解析时:document.getElementsByTagName("name")[0];document.getElementsByTagName("name")[1];

完整实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 原生 AJAX 请求</title>
</head>
<body><h2 id="demo1"></h2><h2 id="demo2"></h2>
</body>
<script>//创建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("您的浏览器不支持此功能。")}xmlhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {//服务器响应，将 JSON 对象转发为 JavaScript 对象myObj = JSON.parse(this.responseText);document.getElementById("demo1").innerHTML = myObj.title;document.getElementById("demo2").innerHTML = myObj.slogan;}}//  向服务器发送GET请求//    规定请求的类型、URL 以及是否异步处理请求xmlhttp.open("GET", "http://127.0.0.1:5500/ajax.json", true);//将请求发送到服务器xmlhttp.send();</script>
</html>

ajax.json 文件内容如下：

{"title":"JavaScript 原生 AJAX 请求","slogan":"学的不仅是技术，更是梦想"}

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 JavaScrpit 中 AJAX 的使用，后期会发布如何使用 Jquery 发送 AJAX 请求。如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要几行简单的代码，就可以实现 AJAX 功能

【AJAX 教程】JS 原生 AJAX 请求相关推荐

JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
.ajax get 写法,原生Ajax写法（GET）
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
js原生ajax写法
博主在大二做数据库课设时,接触的js. 边学边做,当时还没接触ajax,所以在遇到每次请求地址都会刷新这个问题时, 博主干了你们绝对想不到的事:在页面里用了很多"隐形"的frame ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
html里写js ajax吗,js、ajax、jquery的区别是什么？
js.ajax.jquery的区别 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个 ...
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
原生ajax如何执行,原生ajax调用数据实例讲解
由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的aja ...
ajax教程异步刷新验证,Ajax实现异步刷新验证用户名是否已存在的具体方法
都是简单的实例,所以直接发代码静态页面Ajax.html . 代码如下: Ajax function loadXMLDoc() { if (document.getElementById(" ...
瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

【AJAX 教程】JS 原生 AJAX 请求

JS 原生 AJAX 请求

AJAX 简介

一、JS 原生 AJAX 请求

实现 AJAX 的基本步骤

XMLHttpRequest 对象

XMLHttpRequest 对象方法

1、创建 XMLHttpRequest 对象

2、设置响应 HTTP 请求状态变化的函数

onreadystatechange 事件

3、向服务器发送请求

GET 请求

POST 请求

Content-type常见类型：

4、服务器响应

完整实例

总结

【AJAX 教程】JS 原生 AJAX 请求相关推荐

最新文章

热门文章

【AJAX 教程】JS 原生 AJAX 请求

JS 原生 AJAX 请求

AJAX 简介

一、JS 原生 AJAX 请求

实现 AJAX 的基本步骤

XMLHttpRequest 对象

XMLHttpRequest 对象方法

1、创建 XMLHttpRequest 对象

2、设置响应 HTTP 请求状态变化的函数

onreadystatechange 事件

3、向服务器发送请求

GET 请求

POST 请求

Content-type常见类型：

4、服务器 响应

完整实例

总结

【AJAX 教程】JS 原生 AJAX 请求相关推荐

最新文章

热门文章

4、服务器响应