了解ajax

ajax

  • 先了解传统web交互

    • 用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多

  • 概念

    • 是指一种创建交互式网页应用的网页开发技术

  • 优点

    • 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

  • XMLHttpRequest对象

    • XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

    • abort() 停止当前请求
      getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
      getResponseHeader("header") 返回指定首部的串值
      open("method","URL",[asyncFlag],["userName"],["password"]) 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步(默认为异步，true,同步使用false)，用户名，密码
      send(content) 向服务器发送请求,当使用post请求是，发送给服务端的参数
      setRequestHeader("header", "value") 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

    • 使用步骤

      • 创建XMLHTTPRequest对象
      • 使用open方法设置和服务器的交互信息
      • 设置发送的数据，开始和服务器端交互
      • 注册事件
      • 更新界面

    • 兼容IE

      • 例：

      • var xhr = null;
//标准浏览器
 if(window.XMLHttpRequest) {
 xhr = new XMLHttpRequest() 
  } else { 
  // IE5/6下(感觉已经不用写这个了) xhr = new  ActiveXObject("Microsoft.XMLHTTP"); }

  • 例：

  • get请求

  • 步骤一:创建异步对象
var ajax = new XMLHttpRequest();
步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以  带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
步骤三:发送请求
ajax.send();
步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () { 
if (ajax.readyState<mark style="box-sizing: border-box;">4&&ajax.status</mark>200) { 
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 　　　　console.log(ajax.responseText);//输入相应的内容 　　} } *```

  • post请求

  • 例：

  • //创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
 xhr.open('post', '02.post.php' );
//post请求一定要添加请求头才行不然会报错,必须在open之后，send之前
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send('name=fox&age=18');
 xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };

  • 封装

  • 例：

  • function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

          // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
      }
    }

}


    
 AJAX状态值与状态码区别

- AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）
  AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得
这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因
  • 例：
  if(ajax.readyState == 4 && ajax.status == 200){
  putData(ajax.responseText);
}
  • AJAX运行步骤与状态值说明

在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。

0——UNSENT(未打开,初始化中)，创建了xhr对象，open()还没调用。

1——opened(未发送)，调用了open()但是还没调用send()。
2——HEADERS_RECEIVED(已接收响应头信息)，send()被调用，响应头和响应状态已返回。
3——LOADING(下载响应中)，响应体下载中,已经从responseText中获得部分数据。
4——DONE(请求完成)，整个请求完成，不是代表请求成功了，请求失败也算完成。

对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

  • 3-AJAX状态码说明

    1xx：请求收到，继续处理
    2xx：操作成功收到，分析、接受
    3xx：完成此请求必须进一步处理
    4xx：请求包含一个错误语法或不能完成
    5xx：服务器执行一个完全有效请求失败
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本
    200——交易成功
    201——提示知道新文件的URL
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到，但返回信息为空
    205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求
    300——请求的资源可在多处得到
    301——删除请求数据
    302——在其他地址发现了请求数据
    303——建议客户访问其他URL或访问方式
    304——客户端已经执行了GET，但文件未变化
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码，现行版本中不再使用
    307——申明请求的资源临时性删除
    400——错误请求，如语法错误
    401——请求授权失败
    402——保留有效ChargeTo头响应
    403——请求不允许
    404——没有发现文件、查询或URl
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖，请求资源不可访问
    407——类似401，用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态，请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
    500——服务器产生内部错误
    501——服务器不支持请求的函数
    502——服务器暂时不可用，有时是为了防止发生系统过载
    503——服务器过载或暂停维修
    504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
    505——服务器不支持或拒绝支请求头中指定的HTTP版本

-
http模块

- http.createServer()

- 搭建一个http服务器，接受一个回调函数，回调函数接受两个参数

  - req，请求信息，包含浏览器请求的参数，url等详细信息
  - res，响应信息，作为响应请求的对象，包含响应必须的一些方法和属性

- 例：

- ```javascript
  const http = require('http');
  http.createServer(function(req, res) {
    console.log(req);
    console.log(res);
  }).listen(8080)
  ``
- 例：
- http.server()

- 同http.createServer()，需要实例化

- ```javascript
  //获取http模块
  var http = require("http");
  //获取http.Server对象
  var server = new http.Server();


  //创建服务器，并监听3000端口
  server.on("request",function(req,res) {
      res.writeHead(200,{
          "content-type":"text/plain"
      });
      res.write("Hello Nodejs");
      res.end();
  }).listen(3000);

  • http服务创建服务回调函数req对象

  • 例：

  • var http = require("http");

http.createServer(function(req,res) {
    console.log(req.httpVersion);//http协议版本，可能的值有"1.1"或"1.0"
    console.log(req.method);//请求的方法，例如"GET"、"POST"等
    console.log(req.statusCode);//http响应状态码
    console.log(req.statusMessage);//http响应状态消息
    console.log(req.headers);//请求头或响应头的对象
    console.log(req.url);//发送http请求的客户端的url
}).listen(3000);

  • http服务创建服务回调函数res对象

  • 例：

  • var http = require("http");

http.createServer(function(req,res) {
  //写入，接收一个字符串
  res.write();
  // 设置写入头
  // 第一个参数，写入的状态码
  // 第二个参数是一个字符串，用于简单说明，可忽略不传  
  // 第三个参数，一个对象content-type设置写入内容类型
  // 常用值：text/json，以json解析，text/html，以html解析， text/plain，不解析，以重文本显式，charset=UTF-8设置解析字符集为utf-8,国内中文版本浏览器默认按照gbk解析，不设置将会出现乱码
  // 第三个参数也可以使用res.setHeader(name, value)的方式统一设置
  res.writeHead(200, {"Content-Type": "text/json;charset=UTF-8"});
  // 终止相应，相当于res.write和结束的组合，接收一个字符串
  res.end();
}).listen(3000);

  • http.request()和http.get()

  • 功能是作为客户端向http服务器发起请求

  • 例：

  • http.request()

  • var http = require("http");
var options = {
    host: "localhost",
    port: 3000
}

var req = http.request(options,function(res) {
    res.on("data",function(chunk) {
        console.log(chunk.toString("utf-8"));
    });
    res.on("end",function() {
        console.log("----请求结束！----");
    });
});

req.on("error",function(err) {
    console.log(err.message);
});

req.end();

  • http.get()

  • 例：

  • var http = require('http');
var options = {
    host: 'localhost',
    port: '3000'
}
http.get(options, function(res) {
    res.on('data', function(data) {
        console.log(data.toString());
    })
})

简单的总结，希望对大家有所帮助，如有不对的地方也烦请指出，谢谢！

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

推荐阅读更多精彩内容