AJAX

作者: 阿龙哟 | 来源:发表于2018-10-24 14:13 被阅读0次

浏览器与服务器之间,采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏览器就会向服务器发出 HTTP 请求。

AJAX具体步骤如下:

1.创建XMLHttpRequest实例
2.发出HTTP请求
3.接收服务器传回的数据
4.更新网页数据

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
  if(xhr.readyState===4){
      if(xhr.status === 200){
        console.log(xhr.responseText)
      }
      else{
        console.error(xhr.responseText)
      }
  }
}

xhr.onerror = function(e){
   console.err(xhr.statusText)
}

xhr.open('GET','/local',true)
xhr.send(null)

form表单发送请求

GET请求
<form action="/xxx" method='get'>
  <input type="password" name='password'>
  <input type="submit">
</form>
image.png image.png
image.png

post请求 请求行 请求头 请求体


image.png
image.png

a 标签发送请求 默认get请求

 <a  id = x href="/xxx">click</a>
  <script>
    setTimeout(()=>{
      x.click()
    },3000)
  </script>

img 发送请求

 var image = document.createElement('img')
    image.src='/xxx'
    document.body.appendChild(image)
    image.onload = function(){
      console.log('s')
    }
    image.onerror = function(){
      console.log('f')
    }
image.png

用link发送请求

 var link = document.createElement('link')
   link.rel='stylesheet'
   link.href='/xxx'
   document.head.appendChild(link)
image.png

用script发送请求

   var script = document.createElement('script')
   script.src = '/xxx'  
   document.head.appendChild(script)
image.png

总结 发送请求的方式

用 form 可以发请求,但是会刷新页面或新开页面
用 a 可以发 get 请求,但是也会刷新页面或新开页面
用 img 可以发 get 请求,但是只能以图片的形式展示
用 link 可以发 get 请求,但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求,但是只能以脚本的形式运行


AJAX应运而生

AJAX:异步的JavaScript和XML
1.使用XMLHttpRequest发送请求
2.服务器返回XML格式的字符串
3.js解析XML,并更新局部页面

服务器返回的永远都是字符串

tips
在控制台中可以粗略获得代码执行的时间
console.time()
var a = 1
console.timeEnd()
VM145:3 default: 0.014892578125ms


ajax

btn.addEventListener('click',(e)=>{
  let xhr = new XMLHttpRequest()
  xhr.open('GET', '/xxx')
  xhr.send()
})

以前ajax后端返回的都是xml文档

 if(path === '/xxx'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml')
    response.write(`
      <node>
      <to>小姑</to>
      <from>阿龙</from>
      <heading>打招呼</heading>
      <body>你好</body> 
      </node>
    `)
    response.end()
  } 

前台处理
btn.addEventListener('click', (e) => {
  let xhr = new XMLHttpRequest()
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      console.log('请求响应完毕了')
      if (xhr.status === 200) {
        console.log('请求成功')
        console.log(xhr.responseText)
        let parser = new DOMParser()
        let xmlDoc = parser.parseFromString(xhr.responseText,"text/html")
        let title = xmlDoc.getElementsByTagName('heading')[0].textContent
        console.log(title)
      } else if(xhr.status >= 400){
        console.log('请求失败')
      }
    }
  }
  xhr.open('GET', '/xxx')
  xhr.send()
})

处理xml核心语句
let parser = new DOMParser()
let xmlDoc = parser.parseFromString(xhr.responseText,"text/html")
let title = xmlDoc.getElementsByTagName('heading')[0].textContent

因为处理XML还要涉及到非人类的dom操作,已经基本上被淘汰了,现在都是用JSON了


JSON 是一门新的语言 数据交换语言

JSON VS JS

1.JSON 没有抄袭function和undefined
2.JSON的字符串收尾必须是"


image.png

只有域名+协议+端口一模一样才允许发AJAX请求

跨域:
1.JSONP
2.CORS Cross-Origin Resource Sharing

只需要加一句话

response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001')

让服务器知道这个地址和我是一伙的

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

      本文标题:AJAX

      本文链接:https://www.haomeiwen.com/subject/qxlttqtx.html