ajax笔记

需要用ajax做一个联动框，但是不大会ajax，速度过一遍菜鸟教程，抄些笔记。

感觉ajax真是很有意思，想到一个小demo，等做完项目，就弄一个出来玩，哈哈哈。

1：所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");

 

2：向服务器发送请求：

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

xmlhttp.open("GET","ajax_info.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 更稳定也更可靠
 
如果需要像 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: 规定头的值
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
 
3:服务器响应:
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
  

responseText 属性

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

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

实例

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

responseXML 属性

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

4  AJAX - onreadystatechange 事件

onreadystatechange 事件

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

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

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

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

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

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

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面

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

  1.    CBH

      155***73125@163.com

    服务器常用的状态码及其对应的含义如下：

    •  200：服务器响应正常。
    •  304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
    •  400：无法找到请求的资源。
    •  401：访问资源的权限不够。
    •  403：没有权限访问资源。
    •  404：需要访问的资源不存在。
    •  405：需要访问的资源被禁止。
    •  407：访问的资源需要代理身份验证。
    •  414：请求的URL太长。
    •  500：服务器内部错误。
    CBH

       CBH

      155***73125@163.com

    1年前 (2017-04-11)

  2.    1778757629

      lix***778757629@gmail.com

    补全状态码避免再去搜:

    100——客户必须继续发出请求

    101——客户要求服务器根据请求转换HTTP协议版本

    200——交易成功

    201——提示知道新文件的URL

    202——接受和处理、但处理未完成

    203——返回信息不确定或不完整

    204——请求收到，但返回信息为空

    205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

    206——服务器已经完成了部分用户的GET请求

    300——请求的资源可在多处得到

    301——删除请求数据

    302——在其他地址发现了请求数据

    303——建议客户访问其他URL或访问方式

    304——客户端已经执行了GET，但文件未变化

    305——请求的资源必须从服务器指定的地址得到

    306——前一版本HTTP中使用的代码，现行版本中不再使用

    307——申明请求的资源临时性删除

    400——错误请求，如语法错误

    401——请求授权失败

    402——保留有效ChargeTo头响应

    403——请求不允许

    404——没有发现文件、查询或URl

    405——用户在Request-Line字段定义的方法不允许

    406——根据用户发送的Accept拖，请求资源不可访问

    407——类似401，用户必须首先在代理服务器上得到授权

    408——客户端没有在用户指定的时间内完成请求

    409——对当前资源状态，请求不能完成

    410——服务器上不再有此资源且无进一步的参考地址

    411——服务器拒绝用户定义的Content-Length属性请求

    412——一个或多个请求头字段在当前请求中错误

    413——请求的资源大于服务器允许的大小

    414——请求的资源URL长于服务器允许的长度

    415——请求资源不支持请求项目格式

    416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

    417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

    500——服务器产生内部错误

    501——服务器不支持请求的函数

    502——服务器暂时不可用，有时是为了防止发生系统过载

    503——服务器过载或暂停维修

    504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

    505——服务器不支持或拒绝支请求头中指定的HTTP版本

使用回调函数

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

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

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

function myFunction() {

loadXMLDoc("/try/ajax/ajax_info.txt",function() {

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

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

}

5：AJAX ASP/PHP 实例

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

http://www.runoob.com/ajax/ajax-asp-php.html

6:

AJAX 数据库实例(*啊，重点部分啊*)

http://www.runoob.com/ajax/ajax-database.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
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>

<form action=""> 
<select name="customers" onchange="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>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>

</body>
</html>

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

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

AJAX 服务器页面

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

用 PHP 编写服务器文件也很容易，或者用其他服务器语言。请看用 PHP 编写的相应的例子。

"getcustomer.php" 中的源代码负责对数据库进行查询，然后用 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>")
%>

7：AJAX XML 实例

http://www.runoob.com/try/try.php?filename=tryajax_xml2    戳这里看demo

实例解析 - loadXMLDoc() 函数

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

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

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

LoadXMLDoc()

function loadDoc() {
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true); xhttp.send();
}
function myFunction(xml) { var i; var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++){
table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
 
 8：http://www.runoob.com/ajax/ajax-examples.html   AJAX 实例
 
结语：看完就动手啊，喂。
想到一则笑话顺手分享：
一声惊雷过后，我躺在床上抽着烟，她紧紧的抱着我的胳膊将头埋在被子里说：我好害怕。
我猛的吸了口烟，其实我更害怕。
我记得床上就我一个人来着。
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wxhhts/p/9072215.html