【javascript】ajax根底超凡娱乐 - 超凡娱乐

【javascript】ajax根底超凡娱乐

2019年02月16日10时17分32秒 | 作者: 瀚彭 | 标签: 办法,内容,调用 | 浏览: 13378

什么是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.readyState4){
 if(oAjax.status200){
 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();
}

最终附上实例:

 !DOCTYPE HTML 
 html lang="en-US" 
 head 
 meta charset="UTF-8" 
 title ajax根底 /title 
 /head 
 body 
 点击按钮的时分,读取abc.txt input id="btn" type="button" value="读取"/ br/ 
 div id="con" /div 
 /body 
 /html 
 script type="text/javascript" src="ajax.js" /script 
 script type="text/javascript" 
window.onload = function(){
 var oBtn = document.getElementById(btn);
 var oCon = document.getElementById(con);
 oBtn.onclick = function(){
 ajax(abc.txt,function(str){
 oCon.innerHTML = str;
 /script 

abc.txt 内容:

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

 

版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表超凡娱乐立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章