淘先锋技术网

首页 1 2 3 4 5 6 7

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);
    	} 
    }