淘先锋技术网

首页 1 2 3 4 5 6 7

JS中的前后端交互技术ajax

ajax（Asynchronous JavaScript And XML）：异步的JavaScript和数据传输

  1. 数据传输格式
    ① XML：适合重量级数据，通过标签传输，解析较复杂
    ② JSON：适合轻量级数据，通过字符串传输，解析较容易（经常使用）
  2. 语法
    ① 声明ajax对象：let xhr = new XMLHttpRequest();
    ② 预设请求方式、要访问的地址、是否异步：xhr.open(‘get/post’, url, true/false);
    ③ 发送请求：xhr.send();
    ④ 等待响应：通过事件处理函数onreadystatechange监听readystate变化
  3. readyState取值
    ① 0：调用open方法之前
    ② 1：调用send方法之后，发送请求时
    ③ 2：send方法完成，已经接收到所有相应数据
    ④ 3：正在解析数据
    ⑤ 4：解析完成
  4. get请求
    let xhr = new XMLHttpRequest();   // 声明ajax对象
xhr.open('get', './get.php?username=xxx&password=yyy', true); // 预设get请求方式、拼接查询字符串的地址、是否异步
xhr.send(); // 向服务器发送请求
xhr.onreadystatechange = function() {  // 等待数据相应
	if (xhr.readyState === 4 && xhr.status === 200) { // 解析完成且状态码为200时，进行后续操作
		console.log(xhr.responseText);	
	}
  5. post请求
    let xhr = new XMLHttpRequest(); // 声明ajax对象
xhr.open('post', 'post.php', true); // 预设post请求方式，要访问的地址，是否异步
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 设置请求头部，用来解析传入的参数
xhr.send('username=xxx&password=yyy'); // 向服务器发送请求，需要传入queryString
xhr.onreadystatechange = function () { // 等待数据响应
	if (xhr.readyState === 4 && xhr.status === 200) { // 解析完成且状态码为200时，进行后续操作
		console.log(xhr.responseText);
	} 
}