Ajax的属性方法事件以及简单案例_ajax 属性方法事件-CSDN博客

本文链接：https://blog.csdn.net/divide_/article/details/51864213

AJAX入门及简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX - 浏览器支持

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

属性

readonly short readyState（只读的short类型）

State	Name	Description
0	Uninitialized	XMLHttpRequest刚刚创建，或者刚调用了abort()方法。
1	Open	调用了XMLHttpRequest的open方法，但还没有调用send方法。请求还没有发出
2	Sent	send方法已经调用，数据已经提交到服务器，但没有任何响应
3	Receiving	XMLHttpRequest收到了所有的响应消息头，但正文还没有完全收到
4	Loaded	XMLHttpRequest收到了所有的响应消息头，但正文还没有完全收到

responseText：类型string，只读。

作用：存放着服务器返回的响应正文内容（文本内容）.
responseXML:类型Document，只读.

作用：存放着服务器返回的响应正文内容（XML内容）
status：类型short，只读

作用：服务器响应状态码
statusText：类型string，只读

作用：服务器响应码描述

方法

void abort():取消。回到最出始的状态。
String getAllResponseHeaders():获取所有的响应消息头。用逗号分隔的。
String getResponseHeader(String headerName):获取指定的响应消息头的值。
void open(String method,String url,boolean isAnsy);建立与服务器的链接。

method:请求方式 url：请求的地址 isAnsy：是否是异步的。默认是异步的
void send(String data):向服务器发送请求正文
void setRequestHeader(String headerName,String value):设置请求消息头。

事件

onreadystatechange,当XMLHttpRequest对象的readyState发生变化时，都会调用onreadystatechange指定的方法。

js实现ajax的简单案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js实现ajax</title>
        <script type="text/javascript">
            //声明核心对象
            var xmlHttp = GetXmlHttpObject();
            window.onload = function() {
                var dom = document.getElementById("btn");
                dom.onclick = function() {
                    //1.创建核心对象      
                    xmlHttp = GetXmlHttpObject();
                    //绑定函数
                    xmlHttp.onreadystatechange = fn;
                    //打开链接
                    xmlHttp.open("get", "ajax.html", true);
                    //发送
                    xmlHttp.send();
                }
            }
            function fn() {
                if (xmlHttp.readyState == 4) { // 4 = "loaded"
                    if (xmlHttp.status == 200) { // 200 = "OK"
                        document.getElementById("dv").innerHTML = xmlHttp.responseText;
                    } else {
                        alert("Problem retrieving data:" + xmlHttp.statusText);
                    }
                }
            }
            function GetXmlHttpObject() {
                var xmlHttp = null;
                try {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                return xmlHttp;
            }
        </script>
    </head>

    <body>
        <button id="btn">阿贾克斯ajax</button>
        <div id="dv"></div>
        <pre>
            1.创建Ajax流程
                *创建核心对象xmlHTTPRequest
                *绑定函数
                *打开连接
                *发送数据
                *处理回调函数
        </pre>
    </body>
    </html>