Ajax 的用法

1、什么是 Ajax?

  Ajax,英文名 Asynchronous JavaScript and XML,也就是异步的 JavaScript 和 XML。它不是一门新的语言,而是一种使用现有标准的新方法,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容,而且不需要任何浏览器插件,只需要用户允许 JavaScript 在浏览器上执行。

2、Ajax 的工作原理

由上图我们可以看到,浏览器首先 创建一个 XMLHttpRequest 对象,然后将这个对象发送给服务器;服务器响应并封装一些数据回传给浏览器;浏览器接收到服务器的响应数据,根据数据做出相应的操作,比如更新页面内容等操作。

3、如何使用 Ajax?

①、创建 XMLHttpRequest 对象

②、编写状态响应函数

③、调用 open() 方法

④、发送请求 send()

 下面我们通过一个简单的例子来模拟 通过 Ajax 来更新页面上的内容

第一步:首先新建一个 AjaxTest.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/AjaxTest.js"></script>//这里引用了 AjaxTest.js 文件
</head>
<body>
<div style="border:1px solid red;width:200px;height:200px;" id="mydiv"></div>
<input type="button" onclick="Ajax()" value="发送Ajax 请求改变内容" />  //定义点击事件 Ajax()
</body>
</html>

  页面显示效果如下:

第二步:新建一个 formInfo.json 文件,里面存放将要更新的内容

{
  "name":"ys",
  "age":24
}

第三步:新建一个 AjaxTest.js 文件,编写 Ajax 代码

function Ajax(){
    var xhr = null;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行代码
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function(){
        if (xhr.readyState==0 && xhr.status==200)
        {
            alert("请求未初始化");
        }
        if (xhr.readyState==1 && xhr.status==200)
        {
            alert("服务器连接已建立");
        }
        if (xhr.readyState==2 && xhr.status==200)
        {
            alert("请求已接收");
        }
        if (xhr.readyState==3 && xhr.status==200)
        {
            alert("请求处理中");
        }
        if (xhr.readyState==4 && xhr.status==200)
        {
            alert("请求已完成,且响应已就绪");
            document.getElementById("mydiv").innerHTML=xhr.responseText;
        }
    }
    xhr.open("GET","../json/fromInfo.json",true);
    xhr.send();
}

  当我们点击按钮,界面会更新为:

4、对 Ajax 各个步骤的解析

①、创建 XMLHttpRequest 对象

通常来说,所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。所以创建 XMLHttpRequest 对象可以直接这样

var xhr=new XMLHttpRequest();

但是老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象,并不支持 XMLHttpRequest 对象。所以我们这样创建:

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

那么综合起来,创建 XMLHttpRequest  对象的方法为:

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

 该对象的属性为:

上面的例子我们可以看到 XMLHttpRequest 对象为:

②、编写状态响应函数

状态响应函数也就是 onreadystatechange 事件

常见的 status 响应状态码:

③、调用 open() 方法

 open(string method,string url,boolean asynch,String username,string password)

指定和服务器端交互的HTTP方法,URL地址,即其他请求信息; method:表示http请求方法,一般使用"GET","POST". url:表示请求的服务器的地址; asynch:表示是否采用异步方法,true为异步,false为同步; 后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。

④、发送请求 send()

 send(content)

向服务器发出请求,如果采用异步方式,该方法会立即返回。content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。

实际开发中,有很多开源的库已经给我们封装好了,我们直接用就行了。

1、jQuery 的 Ajax 请求:

$.ajax({
        type : "post",  //请求方式
        url : "../json/fromInfo.json",  //请求路径
        data : "",      //传输到服务器的数据
        cache : false,  //是否有缓存
        async : false,  //同步和异步,false 表示异步
        dataType : "json",  //预期的服务器响应数据类型
        beforeSend:function(xhr){
            alert(xhr);
            alert('发送前');
        },
        success:function(data,textStatus,jqXHR){
            alert(data);  //json 文件中的数据,是一个 object 对象
            alert(textStatus); //值为 success,表示成功状态码
            alert(jqXHR);  //这第三个参数封装响应的一些信息
            document.getElementById("mydiv").innerHTML=jqXHR.responseText;
        },
        error:function(xhr,textStatus){
            alert('错误');
            alert(xhr);
            alert(textStatus);
        },
        complete:function(){
            alert('结束');
        }
    });

  对上面相应参数的解析:

2、jQuery 的 get 请求

$.get(url,data,success(response,status,xhr),dataType)

说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,dataType 为服务器返回数据类型。第四个参数 dataType,如果不写,默认返回字符串

$.get(
        "../json/fromInfo.json",
        "",
        function(response,status,xhr){
            alert(xhr.responseText);
        },
        "json"
    );

3、jQuery 的 post 请求

 $.post(url,data,success(response,status,xhr),dataType)

 参数和 get 请求一样

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青枫的专栏

day47_Maven学习笔记

Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具。 Maven是一个跨平台的项目管理工具,它是使用j...

981
来自专栏史上最简单的Spring Cloud教程

Openresty最佳案例 | 第5篇:http和C_json模块

http客户端 Openresty没有提供默认的Http客户端,需要下载第三方的http客户端。 下载lua-resty-http到lualib目录下,使用以下...

1959
来自专栏Java后端技术

原来实现项目多环境打包部署是如此的简单

   在软件开发和部署过程中,我们的软件往往需要在不同的运行环境中运行,例如:开发人员本地开发环境、测试团队的测试环境、生产仿真环境、正式生产环境,不同的公司可...

663
来自专栏SDNLAB

ONOS编程系列(一)之简单应用开发

一个ONOS application是使用maven做管理的OSGi bundle。 因此,ONOS application 可以归结为Java类和POM文件的...

3155
来自专栏PhpZendo

Travis CI 持续集成服务构建 Composer 类库简明教程

在项目开发过程中,编码工作只是软件开发整个过程中的一小部分环节,更多的我们需要去构建和测试我们的项目,以确保项目的健壮和稳定性。

671
来自专栏Java技术分享

跨域与跨域访问

什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的...

19310
来自专栏坚毅的PHP

使用 Java Service Wrapper 启动java后台进程服务

 Java Service Wrapper (http://wrapper.tanukisoftware.com/doc/english/product-ove...

3995
来自专栏程序猿DD

Spring Cloud构建微服务架构:服务网关(过滤器)【Dalston版】

在前两篇文章:服务网关(基础)、服务网关(路由配置)中,我们了解了Spring Cloud Zuul作为网关所具备的最基本功能:路由。本文我们将具体介绍一下Sp...

2935
来自专栏Titan框架

使用Titan Framework搭建一个集群Demo

Titan Framework是一款分布式微服务框架,因其具有简单的配置方式,良好的集成性、多样化的支持、丰富的自定义扩展功能,所以它是非常值得我们去应用的。也...

780
来自专栏PHP在线

PHP输入流php://input介绍

在使用xml-rpc的时候,server端获取client数据,主要是通过php输入流input,而不是$_POST数组。所以,这里主要探讨php输入流php:...

3295

扫码关注云+社区