javascript 原生ajax 的实例讲解

- 日理万妓 2022-05-04 23:07 454阅读 0赞

# **一、什么是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方法及示例**

<table style="margin-left:-3pt;width:430.5pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#555555;border-color:#555555;width:131.35pt;"> 方法 </td> 
 <td style="background-color:#555555;border-color:#555555;width:299.15pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#FFFFFF;border-color:#d4d4d4;width:131.35pt;"> open(method,url,async) </td> 
 <td style="background-color:#FFFFFF;width:299.15pt;"> 规定请求的类型、URL 以及是否异步处理请求。 
 <ul> 
 <li>method：请求的类型；GET 或 POST</li> 
 <li>url：文件在服务器上的位置</li> 
 <li>async：true（异步）或 false（同步）</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td style="background-color:#f6f4f0;border-color:#d4d4d4;width:131.35pt;"> send(string) </td> 
 <td style="background-color:#f6f4f0;width:299.15pt;"> 将请求发送到服务器。 
 <ul> 
 <li>string：仅用于 POST 请求</li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

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");

<table style="margin-left:-1.5pt;width:443.2pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#555555;border-color:#555555;"> 方法 </td> 
 <td style="background-color:#555555;border-color:#555555;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#FFFFFF;border-color:#d4d4d4;"> setRequestHeader(header,value) </td> 
 <td style="background-color:#FFFFFF;"> 向请求添加 HTTP 头。 
 <ul> 
 <li>header: 规定头的名称</li> 
 <li>value: 规定头的值</li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

**responseXML、text服务器响应**

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

<table style="margin-left:-1.5pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#555555;border-color:#555555;width:131.25pt;"> 属性 </td> 
 <td style="background-color:#555555;border-color:#555555;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#FFFFFF;border-color:#d4d4d4;"> responseText </td> 
 <td style="background-color:#FFFFFF;"> 获得字符串形式的响应数据。 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f6f4f0;border-color:#d4d4d4;"> responseXML </td> 
 <td style="background-color:#f6f4f0;"> 获得 XML 形式的响应数据。 </td> 
 </tr> 
 </tbody> 
</table>

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

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

**实例responseText**

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

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

**实例responseXM**

请求 [cd\_catalog.xml][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 \+ " "; \}

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

**属性**

responseText：类型String；只读

responseXML：类型Document；只读

**事件处理器**

Onreadystatechange

**onreadystatechange 事件**

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

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#555555;border-color:#555555;"> 属性 </td> 
 <td style="background-color:#555555;border-color:#555555;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#FFFFFF;border-color:#d4d4d4;"> onreadystatechange </td> 
 <td style="background-color:#FFFFFF;"> 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f6f4f0;border-color:#d4d4d4;"> readyState </td> 
 <td style="background-color:#f6f4f0;"> 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 
 <ul> 
 <li>0: 请求未初始化</li> 
 <li>1: 服务器连接已建立</li> 
 <li>2: 请求已接收</li> 
 <li>3: 请求处理中</li> 
 <li>4: 请求已完成，且响应已就绪</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td style="background-color:#FFFFFF;border-color:#d4d4d4;"> status </td> 
 <td style="background-color:#FFFFFF;"> 200: "OK" 404: 未找到页面 </td> 
 </tr> 
 </tbody> 
</table>

在 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

<table> 
 <tbody> 
 <tr> 
 <td style="width:108.75pt;"> CustomerID </td> 
 <td style="width:203.25pt;"> Nokia </td> 
 </tr> 
 <tr> 
 <td style="width:108.75pt;"> CompanyName </td> 
 <td style="width:203.25pt;"> Nokia Corporation </td> 
 </tr> 
 <tr> 
 <td style="width:108.75pt;"> ContactName </td> 
 <td style="width:203.25pt;"> Olli-Pekka Kallasvuo </td> 
 </tr> 
 <tr> 
 <td style="width:108.75pt;"> Address </td> 
 <td style="width:203.25pt;"> P.O. Box 226, FIN-00045 Nokia Group, Finland </td> 
 </tr> 
 <tr> 
 <td style="width:108.75pt;"> City </td> 
 <td style="width:203.25pt;"> Helsinki </td> 
 </tr> 
 <tr> 
 <td style="width:108.75pt;"> PostalCode </td> 
 <td style="width:203.25pt;"> none </td> 
 </tr> 
 <tr> 
 <td style="width:108.75pt;"> Country </td> 
 <td style="width:203.25pt;"> Finland </td> 
 </tr> 
 </tbody> 
</table>

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

**实例3**

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

获取我收藏的 CD （点击）

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#000000;"> Artist </td> 
 <td style="border-color:#000000;"> Title </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;"> Bob Dylan </td> 
 <td> Empire Burlesque </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;"> Bonnie Tyler </td> 
 <td> Hide your heart </td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;"> Dolly Parton </td> 
 <td> Greatest Hits </td> 
 </tr> 
 </tbody> 
</table>

**实例解析 - loadXMLDoc()** **函数**

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

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

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

![70][]

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****验证用户名是否存在实现步骤：**

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

![70 1][]

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

my.js

![70 2][]

![70 3][]

![70 4][]

servlet

![70 5][]

# **五、案例2：搜索** #

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

2、实现ajax响应数据

//创建XMLHttpRequest对象

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

//创建一个服务器连接

//发送请求

![70 6][]

![70 7][]

![70 8][]

![70 9][]

servlet

![70 10][]

1.  **一个简单的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>

Status:

Status text:

Response:

</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>

The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.

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

</body>

</html>

# **4.[用AJAX从数据库返回数据][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>

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

</body>

</html>

# **AJAX跨域** #

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

[http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html][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 请求的一个或多个名称/值对。

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

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

//解决乱码

req.setCharacterEncoding("utf-8");

resp.setContentType("text/html;charset=utf-8");

String q=URLEncoder.*encode*(req.getParameter("q"), "utf-8");

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

PrintWriter out=resp.getWriter();

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

out.flush();

out.close();

**function** loadData(q,start)\{

$.getJSON("http://18.217.200.209/baidu/yunserver?jsoncallback=?",

\{q:q,start:start\},

**function**(result)\{

$("\#result").append(di);

\},

"json");s

loadData("$\{param.q\}",0);/\*第一次要先调用这个方法  \*/

[cd_catalog.xml]: http://www.runoob.com/try/demo_source/cd_catalog.xml
[70]: /images/20220505/a99b68fd73e947ceb926313396838dfe.png
[70 1]: /images/20220505/8914daa5138c4a55ac30ae74c1d5ada5.png
[70 2]: /images/20220505/06af04d35db34b60bf98a292859d3b16.png
[70 3]: /images/20220505/d80ac6ee42774a65a39aa8c8595e865a.png
[70 4]: /images/20220505/d0fbba8fefc24183a5a105e2d5aa95ce.png
[70 5]: /images/20220505/d6156866a7ba4969b0830c0c99119889.png
[70 6]: /images/20220505/8cbc29fb0d154b6eaa26ba53b8d23b83.png
[70 7]: /images/20220505/89c32b9a33e2472ebc6843304d271272.png
[70 8]: /images/20220505/f125efba3d9742f485c68c71cb8f537e.png
[70 9]: /images/20220505/115073ac279e4446bf74ea5159d5af7f.png
[70 10]: /images/20220505/9fdcacba539b40db8ef2584274222565.png
[AJAX]: http://www.runoob.com/try/try.php?filename=tryajax_database
[http_www.ruanyifeng.com_blog_2016_04_same-origin-policy.html]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html