XMLHttpRequest(AJAX)

祸国殃民小妖精
219 阅读4分钟

XMLHttpRequest对象

概念:

Asynchronous Javascript And XML 不是一门语言 而是对现有技术的综合利用

介绍:

XMLHttpRequest属于浏览器的一种内置对象,主要是用于后台与服务器交互. 因为是异步所以可以实现对网页的部分更新 而不是刷新整个页面.在ajax编程中大量使用.

通过XMLHttpRequest构造函数用于初始化一个实例xhr对象,案例如下

	let xhr = new XMLHttpRequest() //实例化一个xhr对象

XMLHttpRequest中的方法:

XMLHttpRequest.open('method',url,asnyc) :

			初始化一个请求 method是请求方式  url 是请求的值  async 参数  默认是true 表示异步 如果说是同步的话 false(一般都是默认是true 不使用同步)

XMLHttpRequest.setRequestHeader():

			设置http的请求的值  必须要在 open方法之后  send()之前

XMLHttpRequest.send():

			发送请求。如果请求是异步的（默认),该方法将在请求发送后立即返回。

事件处理器(事件监听)：

几乎所有的浏览器都支持onreadystatechange  后来也会出现一些别的方式比如 load (请求完成之后),error等事件. 设置监听的时候  绑定事件的方式除了使用on*** 进行监听之外,也可以使用addEventListener()进行监听XMLHttpRequest中的事件

事件:

xml.onreadystatechange:

	 XMLHttpRequest的readyState属性发生改变时触发 readystatechange事件的时候被调用。主要作用就是为了监听XMLHttpRequest对象的状态变化

	readstate 属性有五个状态：

		xhr.readyState = 0时，（未初始化）还没有调用send()方法

		xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求

		xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容		

		xhr.readyState = 3时，（交互）正在解析响应内容

		xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了

xml.onload:

		请求完成的时候会触发的事件

xml.onloadend:

		当请求结束时 无论请求成功还是失败都会被触发	

xml.onerror:

		请求遇到错误时触发

xml.ontimeout:

	在预设时间内没有接收到响应是触发

AJAX

本质:

在http协议的基础上以异步的方式通过XMLHttpRequest对象以异步的方式与服务器进行通信

(XMLHttpRequest一般是使用异步的方式进行数据交互 ,也可以用同步的方式 只不过同步的效率比较低 所以异步就是ajax的最大的特点)

作用：

可以在页面不刷新的情况下，请求服务器 局部更新页面的数据

代码

	let xhr = new XMLHttpRequest();  //设置一个XMLHttpRequest的对象,
        xhr.open("post", "http://127.0.0.1:3002/getInfo"); //通过open方法设置请求方式 以及路由
        xhr.setRequestHeader(		//设置请求头信息   post请求需要设置content-type 不然参数不能正确传递
          "Content-Type",			
          "application/x-www-form-urlencoded"
        );
        xhr.send(`username=${username}&password=${pwd}`);  //发送数据
        xhr.onload = function () {			//给xhr对象设置好onload事件之后  this.reponse可以接收浏览器返回的信息
          console.log(this.reponse);   //this指的就是xhr这个对象 响应返回的是数据都在response这个属性里面   
        };

理解:

	1.根据let xhr = new XMLHttpRequest()生成一个对象 

	2.通过这个对象使用open()方法 使用请求方式 以及请求的地址

			xhr.open("post", "http://127.0.0.1:3002/getInfo");

	3.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')   设置请求头

	4.发送数据   xhr.send()   发送的数据有三种格式 

			字符串拼接的用&作为分隔符   对象  formdata的方式

	5.数据发送后  通过 xhr.onload=function(){}  在函数内  通过this.reponse的方式获取到服务器返回的信息

补充:

FormData:

		提供了一种表单数据的键值对的构造方式 可以通过XMLHttpRequest.send()方法发送

let formdata = new FormData(form)   //form指的是表单的dom对象   

		可以获取表单中含有name的属性表单值 包括文件内容也会被编码包含进去  如果不含有name值 就获取不到 .

 <form id="myForm" name="myForm">  // 表单
      <div>
        <label for="username">Enter name:</label>
        <input type="text" id="username" name="username">  //username 
      </div>
      <div>
        <label for="useracc">Enter account number:</label>
        <input type="text" id="useracc" name="useracc">   // useracc
      </div>
      <div>
        <label for="userfile">Upload file:</label>
        <input type="file" id="userfile" name="userfile"> //文件
      </div>
    <input type="submit" value="Submit!">
    </form>

使用:

 var myForm = document.getElementById('myForm'); //获取form的dom对象
    formData = new FormData(myForm);	// 使用dom对象

注意: 表单中输入的值 必须要有name的属性

formdata.append方式:

	可以向formdata数据中添加上键值对的方式   

	formdata.append(name ,value ,filename)  

		name参数指的键值对的键  

		value对应的键值对的值   

		filename 传给服务器的文件名称  (一般文件上传的时候 会改变文件的命名方式 )

let formdata = new FormData()
formdata.append('username','congcong')
formdata.append('userpic',myFileInput.files[0],'chris.jpg')
avatar
文章
阅读
粉丝