Ajax概述及XMLHttpRequest对象的常见属性方法

Posted 2021-12-14 遥岑.

目录

• Ajax概述
• • Ajax优点
  • Ajax缺点
• Ajax核心
• • XMLHttpRequest对象的方法
  • XMLHttpRequest对象的属性
• HTTP概述
• • 请求报文
  • 响应报文
• jQuery对Ajax的封装
• • jQuery通用方法发送Ajax请求
  • GET请求
  • POST请求

Ajax概述

Ajax：Asynchronous javascript And XML，异步JavaScript和XML技术。
不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
通过AJAX可以在浏览器向服务器发送异步请求，无刷新获取数据。

XML可扩展标记语言，XML被设计用来传输和存储数据
XML和html类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据
以前AJAX是用XML传输数据，现在用json

Ajax优点

• 可以无需刷新页面与服务器端进行通信
• 允许根据用户事件更新部分页面内容

Ajax缺点

• 没有浏览历史，不能回退
• 存在跨域问题（同源）
• SEO不友好

Ajax核心

Ajax核心：XMLHttpRequest对象，该对象在使用之前必须用JavaScript来获取。

XMLHttpRequest对象的方法

open("method","url")：建立与服务器之间的连接。

//创建对象
const xhr = new XMLHttpRequest()

//初始化 设置请求方法和url
xhr.open('GET','http://localhost:3000/a/server')

• 参数"method"是请求的方式：get、post
• 参数"url"是远程服务器的地址

send(content)：向服务器发送请求，参数"content"表示请求数据，可以是null。

//发送
xhr.send()

setRequestHeader(”header”, ”value”)：设置请求头信息，必须放在open之后调用。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

XMLHttpRequest对象的属性

• onreadystatechange：指定当请求-响应的状态发生改变时执行的回调函数
• readyState：是一个状态值，表示请求-响应完成的状态
• responseText：服务器响应的文本
• status：服务器返回的状态码(例如：200)
• statusText：伴随状态码的字符串信息(例如：200 对应的字符串是’ok’)

HTTP概述

HTTP，超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

• Http请求：客户端(浏览器)向服务器发送的请求(request)
• Http响应：服务器接收到客户端的请求后做出的响应(response)

请求报文

格式：

1. 请求行：请求方式、url、http协议的版本号
2. 请求头：服务器的url、浏览器类型、文本格式（作用是传递附加信息）
3. 空行
4. 请求体：（get请求体为空）

响应报文

格式：

1. 响应行：http协议的版本号、状态码、字符描述
2. 响应头：响应文本的格式和长度、响应的时间、是否允许跨域（附加在响应信息中）
3. 空行
4. 响应体：服务器传递给客户端的具体内容

http协议的响应消息中的状态码：

• 200：表示请求-响应成功,并返回了一个页面
• 204：表示服务器已经成功处理了请求,但是没有返回任何内容
• 3开头：表示页面发生了重定向
• 400：表示服务器不理解客户端的请求语法
• 403：表示服务器拒绝请求
• 404：表示找不到请求的资源
• 500：服务器遇到错误无法完成请求
• 503：服务器无法使用

文件的通用格式：

大类别/具体类别

• text/plain：表示普通文本(.txt)
• text/html： 网页文件
• text/xml：xml文件
• text/css： css文件
• text/javascript：js文件

jQuery对Ajax的封装

jQuery通用方法发送Ajax请求

$.ajax(
     url: '远程服务器的地址',
	 type: '请求方式',
	 data: 发送给服务器端的数据,
	 dataType:'服务器返回的数据的格式',
	 success: function(data) //请求成功后的回调函数,参数data中放的是服务器的响应数据
	 ,
	 error:function(err) //请求失败的回调函数,参数"err"中放的是错误信息
	 
)

$('#b').click(function() 
    $.ajax(
        url:'http://localhost:3000/a/serv',
        data:a:100,
        type:'GET',
        //响应体结果
        dataType:'json',
        success:function(data) 
            console.log(data)
        ,
        error:function(err) 
            console.log(err)
        
    )
)

GET请求

$.get(url, [data], [callback], [type]) ：只能进行get请求
		
url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default

$('#btn').click(function() 
    $.get('http://localhost:3000/a/server',a:100,function(data) 
        console.log(data)
    )
)

POST请求

$.post(url, [data], [callback], [type]) ：只能进行post请求
	   
url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default

$('#bt').click(function() 
    $.post('http://localhost:3000/a/serve',b:200,function(data) 
        console.log(data)
    ,'json')
)