原生Ajax写法

一. Ajax 是什么?

  • 全称Asynchronous JavaScript and XML
  • 异步的 JavaScript 和 XML;
  • 可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容;
  • 能够实现局部刷新,大大降低了资源的浪费;
  • 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行;
  • 是一门用于创建快速动态网页的技术;
  • 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页;

二. Ajax工作原理

三. Ajax的使用

Ajax的使用分为四部分:
1.) 创建一个XMLHttpRequest对象;
1. 兼容IE低版本浏览器(ie5-ie6);
2. 使用if,else或者try,catch;
2.) 配置请求信息;
1. 请求的方式;
2. 请求文件的路径;
3. 是否异步,默认为true;
3.)发送请求;
1. get与post的区别;
2. get与post的使用场景;
4.) 监听状态变化,执行相应回调函数;
1. http状态码都有哪些?
2. 不同状态码代表的含义?

3.1 创建XMLHttpRequest对象

目前所有的现代浏览器(包括IE7+、Firefox、Chrome、Safari 以及 Opera)均内建有 XMLHttpRequest 对象,写法如下:

var xhr = new XMLHttpRequest();

低版本的 IE 浏览器 (主要指 IE5 和 IE6)没有XMLHttpRequest 对象,使用 ActiveXObject 对象,写法如下:

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

举个兼容性写法的例子:

为了兼容所有的现代浏览器,包括 IE5 和 IE6,需要判断浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

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


3.2 向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法:

方法 参数配置
open(method, url, async) method:请求的类型, GET 或 POST;url:文件在服务器上的位置;async:布尔值,判断是否异步,true为异步(默认)或 false为同步;
send(string) string:参数,get不传参,仅用于 POST 请求

注意:

  • 不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
  • 请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
  • 当你使用 async=false 时,后面不要写 onreadystatechange 函数 - 直接把代码放到 send() 语句后面即可:
    xhr.open("GET","/try/ajax/ajax_demo.txt",false);
    xhr.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    
    

举个栗子:

// 使用get方法请求服务器上的1.txt文件
xhr.open("GET","1.txt",true);
xhr.send();

3.2.2 GET与POST的区别

  • 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用;
  • GET存在缓存问题,使用GET方法一定要记得清除缓存,不然请求的数据不是最新的;
  • GET不安全,明文传输,POST更安全;
  • GET适用于小文件,POST没有数量限制;
  • GET使用send方法时不传参,POST必须传参;

3.2.3 只能使用 POST 请求的情况

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

3.2.4 怎么使用POST发送数据?

它其实就类似于 HTML 表单那样 POST 数据,我们需要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中写要发送的数据:
向请求添加 HTTP 头方法如下:

xhr.setRequestHeader(header,value);
// header: 规定头的名称;
// value: 规定头的值;
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Zhou&lname=minghang");

3.4 监听事件变化

  • 如果是同步请求的话,不需要写监听事件变化函数;
  • 一般默认都是异步请求,才写监听函数;

异步请求时的监听事件变化函数如下:

    xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200){
        document.getElementById("myDiv").innerHTML = xhr.responseText;
    }else{
         console.log('失败了');
    }
}

3.4.2 onreadystatechange 事件

  • 当请求被发送到服务器时,我们需要执行一些基于响应的任务。
  • 每当 readyState 改变时,就会触发 onreadystatechange 事件。
  • readyState 属性存有 XMLHttpRequest 的状态信息。

3.4.2.1 onreadystatechange属性的作用?

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

3.4.2.2 readyState属性的作用?都有哪些状态?

  • 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪

一般常见的状态码有:

  • 200:"OK, 成功"
  • 404: "页面找不到"

状态码具体含义:

  • 200:服务器响应正常。
  • 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。
  • 400:无法找到请求的资源。
  • 401:访问资源的权限不够。
  • 403:没有权限访问资源。
  • 404:需要访问的资源不存在。
  • 405:需要访问的资源被禁止。
  • 407:访问的资源需要代理身份验证。
  • 414:请求的URL太长。
  • 500:服务器内部错误。

四. 怎么处理服务器反馈的数据?

如果我们想获得服务器上的数据,并进行相应的操作,这就要用到XMLHttpRequest 对象的 responseTextresponseXML 属性。

  • responseText属性:
    • 获得字符串形式的响应数据;
    • 如果来自服务器的响应并非 XML,请使用 responseText 属性;
    • responseText 属性返回字符串 形式的响应;
    document.getElementById("myDiv").innerHTML=xhr.responseText;
    
  • responseXML属性:
    • 获得 XML 形式的响应数据。
    • 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
    {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    

document.getElementById("myDiv").innerHTML=txt;
```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容