AJAX学习笔记

最新推荐文章于 2022-08-18 10:18:24 发布

Janson666

最新推荐文章于 2022-08-18 10:18:24 发布

阅读量190

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/qq_42102911/article/details/103025116

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 概念

1.1 简介：无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，只需要浏览器允许运行Javascript代码

1.2 应用：

运用XHTML+CSS来表达资讯；

运用JavaScript操作DOM（Document Object Model）来执行动态效果；

运用XML和XSLT操作资料;

运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；

1.3 工作原理：

1.3.1 ：AJAX 是基于现有的 Internet 标准

XML HttpRequest 对象（异步的与服务器交换数据）
Javascript/DOM （信息显示/交互）
CSS （给数据定义样式）
XML （作为转换数据的格式）

例：Google Suggest

使用Ajax 创造出动态性极强的web页面，如在Google中搜素关键字时， JavaScript 会把这些字符发送到服务器，然后服务器会返回一些搜索建议的列表。

1.4 实例解析：

div部分用于显示来自服务器的信息，当按钮被点击时，负责调用名为loadXMLDoc() 的函数：

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

在head中添加 <script>标签，其中包含 loadXMLDoc()函数：

<head>
<script>
function loadXMLDoc()
{
    .... AJAX 脚本执行 ...
}
</script>
</head>

1.5 AJAX - 创建 XMLHttpRequest 对象

1. XMLHttpRequest 对象

XMLHttpRequest 是 Ajax 的基础
所有现代浏览器都支持XMLHttpRequest对象（ IE5 和 IE6 使用 ActiveXObject）
XMLHttpRequest 用于在后台和服务器交换数据，意味着可以不重新加载整个网页的情况下，对网页部分进行更新。

2. 创建 XMLHttpRequest 对象

现在浏览器都内建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象语法

variable = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

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

实例：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

1.6 AJAX- 向服务器发送请求

注： XMLHttpRequest 对象用于和服务器交换数据

1. 向服务器发送请求

将请求发送到服务器，使用 XMLHttpRequest 对象的open() 和 send() 方法：

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

xmlhttp.send();

1.1 方法介绍

1）open(method,url,async)

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

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

2）send(String) :

将请求发送到服务器。

string ：仅用以 POST 请求

1.2 GET OR POST ？

与POST 相比，GET 更简单也更快，且在大部分情况下也可以用。但在以下情况下，使用POST

无法使用缓存文件，（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定可靠

1.2.1 GET 请求代码

注： Math.random()是为请求URL添加唯一的id，使每次请求都不一样，防止请求的信息为浏览器缓存的结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
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;
    }
  }
//Math.random()是为请求URL添加唯一的id，使每次请求都不一样，防止请求的信息为浏览器缓存的结果
  xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);

//添加发送信息 

//xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);

  xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<p>多次点击按钮，可以看到时间变化。</p>
<div id="myDiv"></div>

</body>
</html>

1.2.2 POST请求代码

注：如果需要POST数据，使用 setRequestHeader() 来添加 HTTP 头，然后在send() 方法中规定要发的数据。

setRequestHeader(header,value)

向请求添加HTTP 头。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
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("POST","/try/ajax/demo_post2.php",true);

//xmlhttp.send();

// PSOT数据，使用 setRequestHeader() 来添加HTTP 头，然后再send()方法中规定发的数据
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>

1.3 url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件，如 .txt .xml ，以及服务器脚本文件 .asp / .php

1.4 异步 True 或 False ？

XMLHttpRequest 对象如果要用于AJAX 的话，其 open() 方法的async 参数必须设置为true ：

xmlhttp.open("GET","ajax_test.html",true);

AJAX 功能，JavaScript 无需等待服务器响应，而是：

在等待服务器响应时执行其他脚本

当响应就绪后对响应进行处理

1.7 AJAX - 服务器响应

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

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

1) 若来自服务器的响应并非是xml ，则使用 responseText 属性

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

2）若来自服务器的响应式xml，而且需要作为xml对象进行解析，使用responseXML 属性：

xmlDoc = xmlhttp.responseXML;
txt = " ";
x = xmlDoc.getElementByTagName("ARTIST");
for(i = 0;i < x.length;i++){
    txt = txt + x[i].childNodes[0].nodeValue + "<br>" ;

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

1.8 AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们要执行一些基于响应的任务；
每当readyState 改变时，就会触发 onreadystatechange 事件；
readyState 属性存有XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的三个重要属性：

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

2. readyState ：存有 XMLHttpRequest 的状态，从0到 4 发生变化。

0 ：请求未初始化
1 ：服务器连接已建立
2 ：请求已接收
3 ：请求处理中
4 ：请求已完成，且响应已就绪

3. status ：

200 ： "OK "

404 : 未找到页面

注意：onreadystatechange 事件被触发 4 次（0-4），分别是： 0-1、1-2、2-3、3-4，对应着readyState的每个变化。

1.9 使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。
若在网站上存在多个AJAX 任务，就需要为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含URL 以及 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>

1.10 AJAX ASP/PHP 实例

1 . 网页如何与web服务器进行通信？？？

由JavaScript调用的页面是ASP文件，名称为 " gethint.asp"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    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/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

1）代码解析 --- showHint() 函数

当用户在表单中输入字符时，会执行函数showHint() ，该函数由 "onkeyup" 事件触发

2）源码解析：

如果输入框为空 str.length == 0; 则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

创建 XMLHttpRequest 对象

当服务器响应就绪时执行函数

把请求发送到服务器上的文件

URL 后边添加一个参数 q （带有输入框的内容）

2. AJAX 服务器页面 --- ASP 和 PHP

创建两个版本的服务器文件，一个用ASP编写，一个用 PHP 编写

1) ASP 文件

" gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：

<%
response.expires=-1
dim a(30)
'Fill up array with names 为数组添加数据
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL 从请求的url中获取q的值
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0 判断q是否有值
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found 若查询不到，输出 no suggestion
'or output the correct values  若查到，输出正确的值
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

2） PHP 文件

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
      if ($hint=="")
      {
        $hint=$a[$i];
      }
      else
      {
        $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
  $response="no suggestion";
}
else
{
  $response=$hint;
}

//output the response
echo $response;
?>

Janson666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX学习笔记

1. 概念1.1 简介：无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，只需要...
复制链接

扫一扫