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

Posted 遥岑.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax概述及XMLHttpRequest对象的常见属性方法相关的知识,希望对你有一定的参考价值。

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')
)

以上是关于Ajax概述及XMLHttpRequest对象的常见属性方法的主要内容,如果未能解决你的问题,请参考以下文章

不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

AJAX 核心 —— XMLHTTPRequest 对象 回顾记录

ajax原理及应用

Ajax-03 XmlHttpRequest实现Ajax

使用 XMLHttpRequest实现Ajax

AJAX原理及应用