javascript 原生ajax 的实例讲解

最新推荐文章于 2021-08-06 18:21:08 发布

神奇小白

最新推荐文章于 2021-08-06 18:21:08 发布

阅读量917

点赞数

分类专栏： JavaScript 文章标签： JavaScript ajax

本文链接：https://blog.youkuaiyun.com/uotail/article/details/83143769

版权

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

一、什么是Ajax

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax：只刷新局部页面的技术异步：发送请求后不等返回结果，由回调函数处理结果

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据) 发送请求到服务器并获得返回结果

JavaScript/DOM (信息显示/交互) 更新局部的网页

CSS (给数据定义样式) 美化页面样式

XML (作为转换数据的格式) 一般用于请求数据和响应数据的封装

XMLHttpRequest

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力

构造方法

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

var xmlhttp;

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

Open、send方法及示例

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

open() "get|post" ，"url?name=tom" ，"true|false"

有时候你可能会得到一个缓存的结果，所以可以加上一个唯一的ID

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);

xmlhttp.send();

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

send() 发送请求。可以带参数或 null

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。

然后在 send() 方法中规定您希望发送的数据：

实例

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

方法

描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

responseXML、text服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

实例responseText

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

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

实例responseXM

请求 cd_catalog.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i<x.length;i++)

{ txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }

document.getElementById("myDiv").innerHTML=txt;

属性

responseText：类型String；只读

responseXML：类型Document；只读

事件处理器

Onreadystatechange

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
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)

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

} }

实例1

在输入框中尝试输入字母 a:

输入姓名:

提示信息:

输入任意字码，局部刷新提示信息

实例2

下面的例子将演示网页如何通过 AJAX 从数据库读取信息：请在下面的下拉列表中选择一个客户：

Apple Computer, Inc.BAIDU, IncCanon USA, Inc.Google, Inc.Nokia CorporationSony Corporation of America

CustomerID	Nokia
CompanyName	Nokia Corporation
ContactName	Olli-Pekka Kallasvuo
Address	P.O. Box 226, FIN-00045 Nokia Group, Finland
City	Helsinki
PostalCode	none
Country	Finland

后台服务器源代码负责对数据库进行查询，然后用 HTML 表格返回结果：

实例3

下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息：

获取我收藏的 CD （点击）

Artist	Title
Bob Dylan	Empire Burlesque
Bonnie Tyler	Hide your heart
Dolly Parton	Greatest Hits

实例解析 - loadXMLDoc() 函数

当用户点击上面的"获取我收藏的 CD"这个按钮，就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用 XML 数据的填充 id="demo" 的表格元素：

cd_catalog.xml

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COMPANY>CBS Records</COMPANY>

</CD>

</CATALOG>

使用Ajax验证用户名是否存在实现步骤：

使用文本框的onBlur事件
使用Ajax技术实现异步交互
1. 创建XMLHttpRequest对象
2. 通过 XMLHttpRequest对象设置请求信息
3. 向服务器发送请求
4. 创建回调函数，根据响应状态动态更新页面

四、案例1：实现邮箱验证

my.js

servlet

五、案例2：搜索

1、编写显示数据的容器div

2、实现ajax响应数据

//创建XMLHttpRequest对象

//通过事件调用回调函数处理响应结果，

//创建一个服务器连接

//发送请求

servlet

一个简单的AJAX实例

<!DOCTYPE html>

<html>

<head>

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

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

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

</body>

</html>

2.用AJAX加载 XML 文件

<html>

<head>

function loadXMLDoc(url)

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById('A1').innerHTML=xmlhttp.status;

document.getElementById('A2').innerHTML=xmlhttp.statusText;

document.getElementById('A3').innerHTML=xmlhttp.responseText;

}

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

</script>

</head>

<body>

<h2>Retrieve data from XML file</h2>

<p><b>Status:</b><span id="A1"></span></p>

<p><b>Status text:</b><span id="A2"></span></p>

<p><b>Response:</b><span id="A3"></span></p>

</body>

</html>

Retrieve data from XML file

Status:200

Status text:OK

Response: Tove Jani Reminder Don't forget me this weekend!

Get XML data

3.用AJAX进行一次 HEAD 请求

<html>

<head>

function loadXMLDoc(url)

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();

}

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

</script>

</head>

<body>

<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>

<button οnclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get header information</button>

</body>

</html>

4.用AJAX从数据库返回数据

<!DOCTYPE html>

<html>

<head>

function showCustomer(str)

{

var xmlhttp;

if (str=="")

{

document.getElementById("txtHint").innerHTML="";

return;

}

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

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

}

xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<option value="APPLE">Apple Computer, Inc.</option>

<option value="BAIDU ">BAIDU, Inc</option>

<option value="Canon">Canon USA, Inc.</option>

<option value="Google">Google, Inc.</option>

<option value="Nokia">Nokia Corporation</option>

<option value="SONY">Sony Corporation of America</option>

</select>

</form>

<br>

<div id="txtHint">客户信息将显示在这...</div>

</body>

</html>

AJAX跨域

浏览器同源政策及其规避方法

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

JSONP

WebSocket

CORS

JSONP

JSONP是服务器与客户端跨源通信的常用方法。

最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

首先，网页动态插入<script>元素，由它向跨源网址发出请求。

function addScriptTag(src) {

  var script = document.createElement('script');

  script.setAttribute("type","text/javascript");

  script.src = src;

  document.body.appendChild(script);

window.onload = function () {

  addScriptTag('http://example.com/ip?callback=foo');

function foo(data) {

  console.log('Your public IP address is: ' + data.ip);

};

上面代码通过动态添加<script>元素，向服务器example.com发出请求。

注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({

  "ip": "8.8.8.8"

});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

String callback=req.getParameter("jsoncallback");

PrintWriter out=resp.getWriter();

out.println(callback+"("+r.toString()+")");

out.flush();

out.close();

}

jQuery AJAX 方法

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</script>

$(document).ready(function(){

$("button").click(function(){

$.ajax({url:"demo_test.txt",success:function(result){

$("#div1").html(result);

}});

});

</script>

</head>

<body>

语法

$.ajax({name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值：

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context	为所有 AJAX 相关的回调函数规定 "this" 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
*success(result,status,xhr)*	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。