AJAX

最新推荐文章于 2023-06-20 11:47:50 发布
最新推荐文章于 2023-06-20 11:47:50 发布
阅读量433 收藏
点赞数
分类专栏： 前端实践 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/inexaustible/article/details/108469255
版权

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

一、简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

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

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

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

Google Suggest

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

 

二、AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

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

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

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

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

    }

创建XMLHttpRequest对象实战：

创建html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>

<script>
    window.onload = function () {
        var btn = document.getElementById("btn")
        //每次请求服务器时，都应该获取一个新的ajax对象，不至于有缓存
        btn.onclick = function () {
            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");
            }
            console.log(xmlhttp)
        }
    }
</script>

<input type="button" value="请求服务器" id="btn" />

</body>
</html>

在浏览器中运行：

 

三、AJAX - 向服务器发送请求

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

向服务器发送请求：

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

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法描述
open(method,url,async)

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

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

将请求发送到服务器。

  • string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

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

GET 请求

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();

POST 请求

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

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

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

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
方法描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

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

url - 服务器上的文件

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

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

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

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

 

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

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

Async = true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

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

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

四、AJAX - 服务器响应

服务器响应

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

属性

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

readState属性：

0:请求未初始化，open还没有调用
1:服务器连接已建立，open已经调用了
2:请求已接收，也就是接收到头信息了
3:请求处理中，也就是接收到响应主体了
4:请求已完成，且响应已就绪，也就是响应完成了

判断服务器响应是否完成/成功，我们需要监听readState属性的变化，通过onreadystatechange事件。

 

responseText 属性：

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

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

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

测试：

<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script type="text/javascript">
        function loadXMLDoc()
        {
            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("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","ajax/test1.txt",true);  //同级目录ajax下的文件test1.txt
            xmlhttp.send();
        }
    </script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>

在浏览器中运行：

responseXML 属性：

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

请求 books.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;

测试：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
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)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" οnclick="loadXMLDoc()">获得我的图书收藏列表</button>
 
</body>
</html>

在浏览器中运行：

 

五、AJAX - 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;

        }

    }

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

 

六、AJAX ASP/PHP 请求实例

实例：

下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信：

请在下面的输入框中键入字母（A - Z）：

代码：

showHint() 函数：当用户在上面的输入框中键入字符时，会执行函数 "showHint()" ，该函数由 "onkeyup" 事件触发。

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

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

  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action=""> 
姓氏：<input type="text" id="txt1" οnkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p> 

</body>
</html>

AJAX 服务器页面 - ASP 和 PHP

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "gethint.asp"。

下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。

ASP 文件

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

ucase()是把括号里面的所有字母转化成大写的字母。

mid(）函数可从字符串中返回指定数目的字符，格式是Mid(string,start[,length])

当字符串q的长度小于字符串a(i)的长度时，ucase()函数才会发挥作用把a(i)字符串的1到len(q)个字母转化为大写字母，否则不会转化。

<%

    response.expires=-1

    dim a(30)

    '用名字来填充数组

    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"

    '获得来自 URL 的 q 参数

    q=ucase(request.querystring("q"))

    '如果 q 大于 0，则查找数组中的所有提示

    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

'如果未找到提示，则输出 "no suggestion"

'否则输出正确的值

if hint="" then

    response.write("no suggestion")

else

    response.write(hint)

end if %>

 

PHP 文件

下面的代码用 PHP 编写，与上面的 ASP 代码作用是一样的。

注释：如需在 PHP 中运行这个例子，请将 url 变量的值（Javascript 代码中）由 "gethint.asp" 改为 "gethint.php"。

<?php

// 用名字来填充数组

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

//获得来自 URL 的 q 参数

$q=$_GET["q"];

//如果 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];

            }

        }

    }

}

// 如果未找到提示，则把输出设置为 "no suggestion"

// 否则设置为正确的值

if ($hint == "") {

    $response="no suggestion";

} else {

    $response=$hint;

}

//输出响应 echo $response;

?>

 

七、AJAX 数据库实例

AJAX 可用来与数据库进行动态通信。

AJAX 数据库实例：

下面的例子将演示网页如何通过 AJAX 从数据库读取信息：

代码：

showCustomer() 函数：当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数，该函数由 "onchange" 事件触发。

showCustomer() 函数执行以下任务：

  • 检查是否已选择某个客户
  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行所创建的函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }


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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action="" style="margin-top:15px;"> 
<label>请选择一位客户：
<select name="customers" οnchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<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>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>

</body>
</html>

AJAX 服务器页面

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "getcustomer.asp"。

用 PHP 编写服务器文件也很容易，或者用其他服务器语言。

"getcustomer.asp" 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果：

<%

    response.expires=-1

    sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

    sql=sql & "'" & request.querystring("q") & "'"

 

    set conn=Server.CreateObject("ADODB.Connection")

    conn.Provider="Microsoft.Jet.OLEDB.4.0"

    conn.Open(Server.Mappath("/db/northwind.mdb"))

    set rs=Server.CreateObject("ADODB.recordset")

    rs.Open sql,conn

 

    response.write("<table>")

    do until rs.EOF

        for each x in rs.Fields

            response.write("<tr><td><b>" & x.name & "</b></td>")

            response.write("<td>" & x.value & "</td></tr>")

        next

        rs.MoveNext

    loop

    response.write("</table>")

%>

 

八、AJAX XML 实例

AJAX 可用来与 XML 文件进行交互式通信。

AJAX XML 实例：

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

loadXMLDoc() 函数：

当用户点击上面的“获得 CD 信息”这个按钮，就会执行 loadXMLDoc() 函数。

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

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符。

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;


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)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button οnclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</div>

</body>
</html>

AJAX 服务器页面

上面这个例子中使用的服务器页面实际上是一个 XML 文件，名为 "cd_catalog.xml"。

 

inexaustible
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax原生实现xmlhttp.open（）方法中url的小问题
Milk的博客
03-23 1663
在实现ajax原生方法中用到了xmlhttp.open()方法，其中url直接写为servlet项目配置的路径，浏览器访问不到，代码以及目录如下： （1）html前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生aj...
AJAXCALL
10-31
AJAXCALL
Ajax open 用法
误许的专栏
09-06 6194
 open创建一个新的http请求，并指定此请求的方法、URL以及验证信息语法oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);参数bstrMethodhttp方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。bstrUrl请求的URL地址，可以为绝对地址也可以为相对地址。va
xmlhttp:open方法中的POST、GET参数的区别
weixin_34297300的博客
10-08 720
1  问题描述： xmlhttp:open方法，请求页面的时候，更新页面数据后，第2次拿到的结果还是上次的信息 2  解决办法： 改用POST方式 3  说明： xmlhttp:open方法 创建一个新的http请求，并指定此请求的方法、URL以及验证信息 语法 oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser...
XMLHTTP下open问题
weixin_33922670的博客
06-22 1018
今天发现一个很郁闷的问题，折腾了一整天，才发现是什么原因。写出来供大家参考，以后大家碰到此类问题有个数。 问题如下： 有以下一段代表 functionLogin(username,password,geturl){varxmlhttp=null;try{xmlhttp=newActiveXObject("MSXML2.XMLHTTP")}catch(e){xml...
XMLHttpRequest对象详解和事例
曾舜尧的专栏
08-06 4697
XMLHttpRequest对象详解 1、概述 2、XMLHttpRequest 的方法和属性 XMLHttpRequest包含了基本的属性和方法，正是通过这些方法和属性实现了对服务器的通讯。Ajax依赖XMLHttpRequest完成与服务器的通信。 XMLHttpRequest的基本方法如下： Abort():停止发送当前请求。 getAllResponseHeader
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax
98猛虎的博客
06-09 1713
---------------------------------------ajaxtimeout属性不一定会调用，因为它指的是表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止，如果在设置的时间之前出现结果 那么就不会调用这个函数readyState和XMLHttpRequest第二版新增的时间监听的顺序问题： 1 // 调用了open()方法之后 // 在open之后send之前可以调...
Java基础96 ajax技术的使用
weixin_30768175的博客
04-15 95
本文知识点（目录）： 1、ajax的概念 2、使用ajax技术获取服务端的数据_实例 3、使用ajax技术检查用户名是否已存在_实例 4、使用ajax技术验证登录页面的用户名和密码_实例 1、ajax的概念 ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ajax的全称是Asynchronous JavaS...
Ajax学习资源大全
johncools的博客
08-09 1093
本欲放转载区,但是这样一文章放那里基本是没有用的,帮助不了任何人!所以放新手了!!我一般非经典或者自己用不上不转载,所以如果你不幸看见了的话,恰恰你又对AJAX有兴趣的话不防看下,也许对你有用的!!一.资源类网站1,国内网站1)Ajax中国(推荐)一个专业的ajax技术网站,分类清晰,有大量的电子版教程,以及AJAX源码下载!www.okajax.com2)ajaxcn.o
XMLHttpRequest 对象的open() 方法
qq_31889029的博客
08-30 1698
1 同步方式 var xmlhttp=newXMLHttpRequestObj (); xmlhttp.open('post','xxx.asp?s=dc',false); xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xmlhttp.send(true); alert('do so...
AJAX详解（一）
yisany_Q的博客
11-07 311
AJAX Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少...
excel爬虫相关学习2：vba 爬虫相关xmlhttp
最新发布
奔跑的犀牛先生
06-20 4483
除了EXCEL里直接用 来自网站可以爬数据VBA也可以写爬虫代码但是设计 xmlhttp 相关的内容顾名思义，XMLHTTP是个传送XML格式数据的超文本传输协议。XMLHTTP的数据传输过程更为灵活一些：下面是网上说灵活的地方（看起来一般，可能现在是标配了把）它上传的指令可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。还可以是URL的参数。它下达的结果可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。(vbs)
AJAX的基本知识
weixin_44543324的博客
08-17 624
一、AJAX是什么？ AJAX = Asynchronous JavaScript and XML（异步的JavaScript和 XML）。 AJAX不是新的编程语言，它是一种使用现有标准的新方法，是一种用于创建快速动态网页的技术；通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，也就意味着AJAX是一种在无需重新加载网页的情况下，能够更新部分网页的技术。 （每当用户向服务器端发...
XMLHttpRequest对象的open方法
WARGON的博客
06-10 9217
open(method,url,async):method：一般情况下使用GET方法可以满足要求，使用更简单也更快。但是，在无法使用缓存文件（更新服务器上的文件或数据库）、向服务器发送大量数据以及发送包含位置字符的用户输入时，应该使用post。    GET：例：xmlhttp.open("GET","/try/ajax/demo_get.php",true);    这种直接使用方式可能得到的是...
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值