博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX(一)初识AJAX
阅读量:6800 次
发布时间:2019-06-26

本文共 2248 字,大约阅读时间需要 7 分钟。

一、什么是AJAX

        AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  简单的说就是,AJAX是用来做异步刷新的。

二、最简单的AJAX

  我们通过一个小demo,用最简单的代码,实现使用原生的Javascript代码,从服务端动态获取时间

  1.服务端代码

  这段服务端代码我是使用.NET来写的,这是一个一般处理程序,返回服务端的时间。  

public class TimeHandler : IHttpHandler{    public void ProcessRequest(HttpContext context)    {        context.Response.ContentType = "text/plain";        context.Response.Write(DateTime.Now.ToLongTimeString());    }    public bool IsReusable    {        get        {            return false;        }    }}

  2.客户端代码

  本段JS代码的工作是,当点击一个id为”btnTime"的按钮时,发出AJAX请求,获取服务器时间,如果获取到,就把时间显示到一个H2标签中

   3.代码详细说明 

  这是摒去细节属性的,最简单的,原生Javascript版的AJAX调用。下面详细说明代码作用

  1. XMLHttpRequest对象是AJAX技术的核心对象,正是通过这个对象发出异步请求的,不管是“get”还是“post”方式

  2. xhr.open(string method, string url , bool async)。这是open方法的原型,该方法需要3个参数

   method : http请求方式,比如“get”,“post”

   url : 要请求的地址

   async:是否使用异步方式,可选值 true / false。正常情况都是选用true,话说如果不用异步方式发出请求,写这坨JS代码岂不是吃饱了撑的。

  3. onreadystatechange本身是个事件,它是异步对象最重要的一个API。这个事件字面意思就是“当就绪状态发生改变时”触发。 

   那么首先就要了解什么叫就绪状态(readystate)。 

    readystate,类似于http的响应状态码。响应状态码是用来标识服务器对于客户端浏览器请求的响应情况,这个 readystate是异步对象XMLHttpRequest从创建,到完整的获取到服务端返回的报文,在此完整过程中的状态;我们可以简单的做个比喻,就好比我们在电商网站上下个订单,然后从下单那1刻起,直到我们接收到货物,我们这个购买活动,都会经历一个:下单 --> 配货 --> 发货 -->待收 --> 已签收 ,这样5个状态。我们给每个状态都使用1个整数来代表,这样程序就可以根据这个就绪状态readystate,来判断此次异步请求已经走到哪一个步骤了。不过更多情况下,我们通过这个readystate来判断异步请求是否走到了最后1步,也就是XMLHttpRequest对象是否拿到了完整的响应报文。 

    readystate一共有5个状态,分别是0,1,2,3,4.分别代表的意思如下: 

      0:未初始化。未调用open()方法 

    1:启动。已经调用open()方法,未调用send()方法 

    2:发送。已经调用send()方法,未接收到响应 

    3:接收。已经接收到部分数据 

    4:完成。已经接收到全部数据,可以在客户端使用 

     所以,从这个意义上讲,onreadystatechange就像一个监听程序,它在不停的监听XMLHttpRequest对象的readystate属性,只要该属性一发生变化,此事件就会被触发。 

          很显然,我们只能在拿到完整的响应报文后,才能做后续的操作(把报文内容,按预定方式展示到浏览器中),因此,我们在该事件的注册响应函数中有以下判断语句: 

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

   其中  xhr.readyState == 4  是用来判断异步对象的就绪状态是不是4,换句话说也就是看是否接收到完整的响应报文了。 

   但仅仅做这样的判断是不够的,因为不能保证这个报文一定是正确的,比如:服务器返回404错误,这个时候客户端也拿到了完整的响应报文,但显然这个报文不是正确的报文。所以这个if判断条件还需要再加上  xhr.status == 200  。这样表示,获取到的响应报文是服务器响应正确的,并且是完整的获取到了,这样的报文才有意义。 

  4.xhr.send(null)表示发出请求。其实第4步和第3步的代码位置是可以互换的,效果相同。 

     send函数中null表示这次请求不需要传递参数,记好了,即使不传递参数,也要写个null。 

          不过话又说回来了,“get”请求方式,即使要传参,也不在send函数中传。这个是后话了,下次再说吧。     

  

转载于:https://www.cnblogs.com/ldq678/p/9201635.html

你可能感兴趣的文章
Spring+Quartz实现定时任务的配置方法(插曲)
查看>>
一个基于cocos2d-x 3.0和Box2d的demo小程序
查看>>
(转)淘淘商城系列——MyBatis分页插件(PageHelper)的使用以及商品列表展示
查看>>
struts2前端页面读取Clob/BLOB
查看>>
【MongoDB】深入了解MongoDB不可不知的十点
查看>>
[ACM] POJ 2635 The Embarrassed Cryptographer (同余定理,素数打表)
查看>>
又一次发现Oracle太美之glogin.sql
查看>>
hdu5387 Clock
查看>>
安装redis出现cc adlist.o /bin/sh:1:cc:not found
查看>>
初步认识Tensorflow
查看>>
tab 切换实现方法
查看>>
leetcode-First Missing Positive
查看>>
自抛球练习
查看>>
C++开发人脸性别识别教程(3)——OpenCv配置和ImageWatch插件介绍
查看>>
前端网页开发常用的问题定位方法
查看>>
自定义VIew方法
查看>>
iOS中 最新支付宝支付(AliPay) 韩俊强的博客
查看>>
京东的个性化推荐系统
查看>>
Java 泛型 泛型数组
查看>>
【SqlServer系列】表连接
查看>>