关于 AJAX

Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML

  • 使用 XMLHttpRequest 发请求
  • 服务器返回 XML 格式的字符串
  • JS 解析 XML，并更新局部页面

如何发请求

  1. 用 form 可以发请求，但是会刷新页面或新开页面
<body>
  <form action="xxx" method="post">
    <input type="password" name="password">
    <input type="submit">
  </form>
</body>
  1. 用 a 可以发 get 请求，但是也会刷新页面或新开页面
<body>
  <a href="//www.greatytc.com/xxx">click</a>
</body>
  1. 用 img 可以发 get 请求，但是只能以图片的形式展示
<body>
  <script>
    var image = document.createElement('img')
    image.src = '//www.greatytc.com/xxx'
    document.body.appendChild(image)
    image.onload = function(){
      console.log('success')
    }
    image.onerror = function(){
      console.log('fail')
    }
  </script>
</body>
  1. 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
<body>
  <script>
    var link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = '//www.greatytc.com/xxx'
    document.head.appendChild(link)
  </script>
</body>
  1. 用 script 可以发 get 请求，但是只能以脚本的形式运行
<body>
  <script>
    var script = document.createElement('script')
    script.src = '//www.greatytc.com/xxx'
    document.body.appendChild(script)
  </script>
</body>

用 XMLHttpResquest 请求

<script>
  myButton.addEventListener('click',(e)=>{
    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status <300){
          console.log(request.responseText)
        }else if(request.status >= 400){
          console.log('请求失败')
        }
      }
    }
    request.open('post','//www.greatytc.com/xxx')
    request.send()
  })
</script>

同源策略和CORS跨域

只有 协议+端口+域名 一模一样才允许发 AJAX 请求。
比如： jack.com:8001 网站向 frank.com:8002 发起 AJAX 请求，
那么需要在 frank.com:8002 的后端添加代码：
response.serHeader('Access-Control-Allow-Orign','http://frank.com:8001')
才能够成功。

...
if(path === '//www.greatytc.com/xxx'){
  response.statusCode = 200
  response.setHeader('Content-Type','text/jason;charest=utf-8')
  response.setHeader('Access-Control-Allow-Orign','http://frank.com:8001')
  response.write(`
    {
      "note"{
        "to": "小方"，
        "from": "小谷"，
        "note": "Hello"
      }
    }
  `)
  response.end()
}esle if(...){
  ...
}
...

JS操作请求与响应

1.请求第一部分
XMLHttpRequest.open() 可以配置请求的方法，host，路径。

2.设置请求第二部分请求头
XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在 open()方法和 send()之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
语法:

myReq.setRequestHeader(header, value);

<script>
  myButton.addEventListener('click',(e)=>{
    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status<300){
          console.log(request.responseText)
        }else if(request.status >= 400){
          console.log('请求失败')
        }
      }
    }
    request.open('post','//www.greatytc.com/xxx')
    request.setRequestHeader('frank','18')
    request.send()
  })
</script>

可以在开发者工具看到请求头为 frank ： 18

设置Content-Type:
request.setRequestHeader('Content-Type','x-www-form-urlencoded')

3.设置请求第四部分
XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

<script>
  myButton.addEventListener('click',(e)=>{
    let request = new XMLHttpResquest()
    request.onreadystatechange = ()=>{
      if(request.readyState = 4){
        if(request.status >= 200 && request.status <300){
          console.log(request.responseText)
        }else if(request.status >= 400){
          console.log('请求失败')
        }
      }
    }
    request.open('post','//www.greatytc.com/xxx')
    request.send('设置第四部分内容')
  })
</script>

4.获取请求的响应
XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头。
或者XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头。
var myHeader = getResponseHeader(name)
status : 200
statusText: OK
responseText : 响应的第四部分

封装和使用

window.jQuery.ajax = function(method,url,body,successFn,failFn){
  let request = new XMLHttpResquest()
  request.onreadystatechange = ()=>{
    if(request.readyState = 4){
      if(request.status >= 200 && request.status <300){
        successFn.call(undefined,request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined,request)
      }
    }
  }
  request.open(method,url)
  request.send(body)  
}

myButton.addEventListener('click',(e)=>{
  winsow.jQuery.ajax(
    'post',
    '//www.greatytc.com/xxx',
    'a=1',
    ()=>{conosle.log(1)},
    ()=>{conosle.log(2)}
  )
})
// 传入 method url body successFn failFn 的值

做一点优化

window.jQuery.ajax = function(options){
  let method = options.method
  let url = options.url
  let body = options.body
  let successFn = options.successFn
  let failFn = options.failFn

  let request = new XMLHttpResquest()
  request.onreadystatechange = ()=>{
    if(request.readyState = 4){
      if(request.status >= 200 && request.status <300){
        successFn.call(undefined,request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined,request)
      }
    }
  }
  request.open(method,url)
  request.send(body)  
}

myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    method: 'post',
    url: '//www.greatytc.com/xxx',
    body: 'a=1',
    successFn: (x)=>{conosle.log(1)},
    failFn: (x)=>{conosle.log(2)} 
  }) 
})

如果 successFn 需要传两个参数

...
 successFn: (x)=>{
     f1.call(undefined,x)
     f2.call(undefined,x)    
},
...

传 header

...
headers: {
          'Content-Type':'application/x-www-form-urlencoded',
          'frank': '18'
        }
...

// window.jQuery.ajax 调整
window.jQuery.ajax = function(options){
  let method = options.method
  let url = options.url
  let body = options.body
  let successFn = options.successFn
  let failFn = options.failFn
  let headers = options.headers

  let request = new XMLHttpResquest()
  request.onreadystatechange = ()=>{
    if(request.readyState = 4){
      if(request.status >= 200 && request.status <300){
        successFn.call(undefined,request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined,request)
      }
    }
  }
  request.open(method,url)
  for(let key in headers){
    let value = headers[key]
    request.setRequestHeader(key,value)
  } // 遍历 headers 获取 key 和 value
  request.send(body)  
}

对是否传两个参数做一个判断

window.jQuery.ajax = function(options){
 // 假如传了两个参数，做一个判断
 let url
 if(arguments.length === 1){
   url = options.url
 }else if(arguments === 2){
   url = argumrnts[0]
   options = argumrnts[1]
 }
 let method = options.method
 let url = options.url
 let body = options.body
 let successFn = options.successFn
 let failFn = options.failFn
 let headers = options.headers

 let request = new XMLHttpResquest()
 request.onreadystatechange = ()=>{
   if(request.readyState = 4){
     if(request.status >= 200 && request.status <300){
       successFn.call(undefined,request.responseText)
     }else if(request.status >= 400){
       failFn.call(undefined,request)
     }
   }
 }
 request.open(method,url)
 for(let key in headers){
   let value = headers[key]
   request.setHeader(key,value)
 }
 request.send(body)  
}

Promise

简化代码，

myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    method: 'post',
    url: '//www.greatytc.com/xxx',
  }).then(
  (request.responseText)=>{console.log(request.responseText)},
  (request)=>{console.log(error)}
  )
}) 
// 直接在后面跟 then ，第一个参数表示成功后执行的函数，第二个参数表示失败执行的函数

// 可以继续跟 then 再一次对结果进行处理  then中文含义就是 然后
myButton.addEventListener('click',(e)=>{
  window.jQuery.ajax({
    method: 'post',
    url: '//www.greatytc.com/xxx',
  }).then(
  (request.responseText)=>{console.log(request.responseText)},
  (request)=>{console.log(error)}
  )
}).then(
(上一次处理结果)=>{console.log(上一次处理结果)}，
(request)=>{console.log(error2)}
)

window.jQuery.ajax = function(options){
  return new Promise(function(resolve,reject){
    let url
    if(arguments.length === 1){
      url = options.url
    }else if(arguments === 2){
      url = argumrnts[0]
      options = argumrnts[1]
    }
    let method = options.method
    let url = options.url
    let body = options.body
    let headers = options.headers

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

推荐阅读更多精彩内容

  • 关于AJAX
    Ajax是Asynchronous JavaScript and XML的缩写。主要用于页面无刷新请求数据。 Aj...
    晴天小猪L阅读 286评论 0赞 0
  • 关于ajax
    Ajax是什么Ajax（Asynchronous JavaScript + XML）即异步JavaScript +...
    前端开发小匠阅读 240评论 0赞 1
  • 关于ajax学习笔记
    一、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识） ajax全称Asynchronous Ja...
    dnaEMx阅读 403评论 0赞 2
  • 关于ajax的问题
    ajax的过程。 1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象 2. 创建一个新的HTT...
    AdonisL阅读 554评论 0赞 4
  • 关于Ajax
    Ajax是异步的javascript和xml Ajax的交互使用的是浏览器的XMLHttpRequest，通过...
    开心糖果的夏天阅读 259评论 0赞 3