博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax基础
阅读量:4621 次
发布时间:2019-06-09

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

什么是 ajax

ajax技术能够向服务器请求额外的数据而无须加载页面,会带来更好的用户体验。

ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取。

http 请求

首先需要了解 http 请求的方法(GET 和 POST)。

GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。

POST 用于上传数据。POST 安全性一般,容量几乎无限。

ajax 请求

ajax 请求一般分成 4 个步骤。

1、创建 ajax 对象

在创建对象时,有兼容问题:

var oAjax = new XMLHttpRequest();   //for ie6 以上var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

合并上面的代码:

var oAjax = null;if(window.XMLHttpRequest){    oAjax = new XMLHttpRequest();}else{    oAjax = new ActiveXObject('Microsoft.XMLHTTP');}

2、连接服务器

在这里会用到 open() 方法。open() 方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。

oAjax.open('GET', url, true);

3、发送请求

send() 方法。

oAjax.send();

4、接收返回值

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

readyState:请求状态,返回的是整数(0-4)。

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

1(载入):已调用 send() 方法,正在发送请求。

2(载入完成):send() 方法完成,已收到全部响应内容。

3(解析):正在解析响应内容。

4(完成):响应内容解析完成,可以在客户端调用。

status:请求结果,返回 200 或者 404。

200 => 成功。

404 => 失败。

responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。

oAjax.onreadystatechange=function(){    if(oAjax.readyState==4){        if(oAjax.status==200){            fnSucc(oAjax.responseText);        }else{            if(fnFaild){                fnFaild();            }        }    }};

将以上代码进行封装:

function ajax(url, fnSucc, fnFaild){    //1.创建对象    var oAjax = null;    if(window.XMLHttpRequest){        oAjax = new XMLHttpRequest();    }else{        oAjax = new ActiveXObject("Microsoft.XMLHTTP");    }          //2.连接服务器      oAjax.open('GET', url, true);   //open(方法, url, 是否异步)          //3.发送请求      oAjax.send();          //4.接收返回    oAjax.onreadystatechange = function(){  //OnReadyStateChange事件        if(oAjax.readyState == 4){  //4为完成            if(oAjax.status == 200){    //200为成功                fnSucc(oAjax.responseText)             }else{                if(fnFaild){                    fnFaild();                }            }        }    };}

最后附上实例:

    
ajax基础 点击按钮的时候,读取abc.txt

abc.txt 内容:

这是ajax调用的内容1。这是ajax调用的内容2。这是ajax调用的内容3。

转载于:https://www.cnblogs.com/zhaoyuhua/p/6142550.html

你可能感兴趣的文章
BBC-The Race and a quiz
查看>>
大端小端
查看>>
IntelliJ IDEA 把java项目导出成可执行的jar
查看>>
DynamicReports
查看>>
鼠标经过图像改变实现
查看>>
二分查找法
查看>>
Spring3升级到Spring4时, 运行时出现找不到MappingJacksonHttpMessageConverter的情况
查看>>
详解缓冲区溢出攻击以及防范方法
查看>>
分布式事务解决方案(一) 2阶段提交 & 3阶段提交 & TCC
查看>>
android之网格布局和线性布局实现注册页面
查看>>
BZOJ 1014: [JSOI2008]火星人prefix( splay + hash )
查看>>
安装ejabberd2并配置MySQL为其数据库
查看>>
angular repeat
查看>>
android 图片圆角化控件
查看>>
java第三次作业
查看>>
HP Jack介绍
查看>>
敏捷软件开发(3)---COMMAND 模式 & Active Object 模式
查看>>
poj 1062 昂贵的聘礼 解题报告
查看>>
get the page name from url
查看>>
visual studio中csproj文件中的project guid改为小写 ( notepad++ 正则)
查看>>