JavaScript 之 AJAX 请求

南楼画角 提交于 2020-03-14 19:39:25

一、Ajax 简介

  1、概述

    AJAX 即 “Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 

    Ajax 是一种浏览器通过 JavaScript 异步发起请求,在与服务器交换数据并更新部分网页的,即在不重新加载整个页面的情况下,局部更新页面的技术。

  2、特点

    (1)Ajax 请求的局部更新,浏览器地址栏不会发生变化;

    (2)局部更新不会舍弃原来页面的内容;

 

二、Ajax XHR

  1、XHR 创建对象:XMLHttpRequest 是 Ajax 的基础。

    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    创建 XMLHttpRequest 对象(所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象)

var xhr = new XMLHttpRequest();

    老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

var xhr2 = new ActiveXObject("Microsoft.XMLHTTP");

     兼容性处理:

1 var xmlhttp;
2 if (window.XMLHttpRequest)
3   {// code for IE7+, Firefox, Chrome, Opera, Safari
4   xmlhttp=new XMLHttpRequest();
5   }
6 else
7   {// code for IE6, IE5
8   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
9   }

 

  2、XHR 请求:XMLHttpRequest 对象用于和服务器交换数据

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

open(method,url,async) :  规定请求的类型,URL 以及是否异步处理请求

            •  method :请求的类型,GET 或 POST
            •  url:文件在服务器上的位置;
            •  async:true(异步)或 false(同步)

send(String):                     将请求发送到服务器,String:仅用于 POST 请求

    (1)请求使用 GET 还是 POST?

        与 POST 相比, GET 请求更简单也更快,并且大部分情况下都能使用。

        然而,在下面几种情况下,使用 POST 请求:

        •  无法使用缓存文件(更新服务器上的文件或数据库)
        •     向服务器发送大量数据(POST 没有数据量限制)
        •     发送包含未知字符的信息,POST 比 GET 更加稳定也更可靠

    (2)使用 POST 方式,发送 表单数据

        使用 POST 发送表单数据,使用 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定发送的数据

         方法:

setRequestHeader(header,value)         向请求添加 HTTP 头,header: 规定头的名称;value:规定头的值

        Demo:

1 xmlhttp.open("POST","ajax_test.do",true);
2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3 xmlhttp.send("fname=Bill&lname=Gates");

 

  3、XHR 响应:服务器响应

    如果要获得来自服务器的响应,需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性:

    属性:

responseText         获取字符串像是的响应数据

responseXML        获取 XML 形式的响应数据

  4、XHR - onreadystatechange 事件

    XMLHttpRequest 对象的三个重要的属性:

onreadystatechange                存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数

status:          200:“OK”;404:未找到页面

readyState         存有 XMLHttpRequest 的状态,从0到4发送变化:

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

    当请求被发送到服务器时,需要执行一些基于响应的任务,每当 readyState 改变时,就会触发 onreadystatechange 事件。

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

    在 onreadystatechange 事件中,规定当服务器响应已做好被处理的准备时所执行的任务,当 readyState 等于4且状态为200,表示响应已就绪。

三、案例

 1 script type="text/javascript">
 2         // 使用 javaScript 语言发起 Ajax 请求, 访问服务器 AjaxServlet 中 javaScriptAjax
 3         function ajaxRequest() {
 4             // 1、 我们首先要创建 XMLHttpRequest
 5             var xmlhttprequest = new XMLHttpRequest();
 6             // 2、 调用 open 方法设置请求参数
 7             xmlhttprequest.open("GET","http://localhost:8080/book/ajaxServlet?action=javaScriptAjax",true)
 8             // 3、 在 send 方法前绑定 onreadystatechange 事件, 处理请求完成后的操作。
 9             xmlhttprequest.onreadystatechange = function(){
10                 if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
11                     var jsonObj = JSON.parse(xmlhttprequest.responseText);
12                     // 把响应的数据显示在页面上
13                     document.getElementById("div01").innerHTML = "编号: " + jsonObj.id + " , 姓名: " + jsonObj.name;
14                 }
15             }
16             // 4、 调用 send 方法发送请求
17             xmlhttprequest.send();
18         }
19 
20     </script>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!