Ajax-XMLHttpRequest对象

最新推荐文章于 2024-07-26 16:20:18 发布

面条请不要欺负汉堡

最新推荐文章于 2024-07-26 16:20:18 发布

阅读量300

点赞数 1

分类专栏： javascript+TypeScript 文章标签： XMLHttpRequest对象 ajax简单封装

本文链接：https://blog.csdn.net/gao_xu_520/article/details/78247402

版权

javascript+TypeScript 专栏收录该内容

46 篇文章 4 订阅

订阅专栏

没有xmlhttprequest时，都是采用同步的做法，有了这个对象，进行了异步(比如在填写表单时，服务器会根据你填写的内容，进行马上的验证，而不是所有信息填写完后再验证)

一.创建XMLHttpRequest对象

1.实例化XMLHttpRequest对象

var request = new XMLHttpRequest(); (ie6一下就不支持)
var request = new ActiveXObject("Microsoft.XMLHTTP"); //ie6,ie5


创建请求对象，兼容所有的浏览器
	function createRequest(){
		try{
			request=new XMLHttpRequest();//ie7一下不兼容，其他兼容-XMLHttpRequest()创建请求对象
		}catch(tryMS){
			try{
			request=new ActiveXObject("Msxm12.XMLHTTP");  
	//绝大多数的ie兼容-ActiveXObject是Microsoft特定的一种编辑对象
			}catch(otherMS){
				try{
				request=new  ActiveXObject("Microsoft.XMLHTTP");// 兼容IE6, IE5
				}catch(failed){
					request=null;//创建请求失败
				}
			}
		}
		return request;//返回一个结果
	}

二.XMLHttpRequest发送请求

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法

1.发送请求的方法：
(1).open(method,url,async)
规定请求的类型(get/post)、URL(文件在服务器上的位置) 以及是否异步处理请求（async值为true是异步，async值为false是同步）。
(2).send(string)是发送请求

有参数时，仅限post请求。

列子如下：

2.GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

三.XMLHttpRequest取得响应

(1).XMLHttpRequest取得响应的值：
1.responseText:获得字符串形式的响应数据
2.responseXML：获得XML形式的响应数据
3.status和statusText：以数字和文本形式返回HTTP状态码
4.getAllResponseHeader()：获取所有的响应报头

5.getResponseHeader()：查询响应中的某个字段的值


四.ajax与页面整体的三步骤：
1、运用HTML和CSS实现页面，表达信息；
2、运用XMLHttpRequest和web服务器进行数据的异步交换；
①创建XMLHttpRequest对象
②定义发送请求的类型
③获取数据，以及请求头
④发送请求
⑤监听服务器是否响应
⑥响应成功后的操作
var request = new XMLHttpRequest();//1.创建XMLHttpRequest对象
	request.open("POST", "server.php");2.发送请求：请求的类型
	var data = "name=" + document.getElementById("staffName").value 
	                  + "&number=" + document.getElementById("staffNumber").value 
	                  + "&sex=" + document.getElementById("staffSex").value 
	                  + "&job=" + document.getElementById("staffJob").value;
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头
	request.send(data);//发送请求

	request.onreadystatechange = function() {
		if (request.readyState===4) {//监听服务器是否响应
			if (request.status===200) { 
	document.getElementById("createResult").innerHTML = request.responseText;//响应成功后的操作

			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}

3、运用JavaScript操作DOM，实现动态局部刷新；

4.列子
server.php
<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
		array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
	);

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通过员工编号搜索员工
function search(){
	//检查是否有员工编号的参数
	//isset检测变量是否设置；empty判断值为否为空
	//超全局变量 $_GET 和 $_POST 用于收集表单数据
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo "参数错误";
		return;
	}
	//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
	//global 关键词用于访问函数内的全局变量
	global $staff;
	//获取number参数
	$number = $_GET["number"];
	$result = "没有找到员工。";
	
	//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . 
			                  "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
			break;
		}
	}
    echo $result;
}

//创建员工
function create(){
	//判断信息是否填写完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo "参数错误，员工信息填写不全";
		return;
	}
	//TODO: 获取POST表单数据并保存到数据库
	
	//提示保存成功
	echo "员工：" . $_POST["name"] . " 信息保存成功！";
}

index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script>
document.getElementById("search").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
	request.send();
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("searchResult").innerHTML = request.responseText;
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}
}

document.getElementById("save").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("POST", "server.php");
	var data = "name=" + document.getElementById("staffName").value 
	                  + "&number=" + document.getElementById("staffNumber").value 
	                  + "&sex=" + document.getElementById("staffSex").value 
	                  + "&job=" + document.getElementById("staffJob").value;
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("createResult").innerHTML = request.responseText;
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}
}
</script>
</body>
</html>


五.ajax简单封装
(1).ajax一般分为简单的四部：
1.创建ajax对象（这里兼容ie的话要做一下处理）
2.连接，即请求对象的open方法（get和post还有点不同，get参数要放在url后面，post要设置请求头）
3.发送，即请求对象的send函数（post参数则放在send里面）
4.接收，在onreadystatechange（存储函数或函数名，每当readyState属性改变时，就会调用该函数。）函数里面处理。
还可以加上超时这些

(2).onreadystatechange分析
要先判断readyState的状态（有四个状态）
①： 0，请求未初始化；
②： 1，服务器连接已建立；
③： 2，请求已接收；
④： 3，请求处理中；
⑤： 4，请求已完成，且响应已就绪
当readyState等于4时，你又要判断status的状态
请求成功时status状态 200-300（不包括300） ，还有304（是缓存）（具体状态可以去参考文档）
在成功（失败）的回掉函数里面将xhr.responseText的值返回出去。

(3).封装代码
'use strict';

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析参数
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 创建ajax
  if (window.XMLHttpRequest) {

    // 高级浏览器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 连接
  var str = jsonToUrl(options.data);
  if (options.type === 'get') {
    xhr.open('get', `${options.url}?${str}`, true);

    // 3 发送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

    // 请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 发送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定时器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超时
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超时了");
            xhr.abort(); // 终止
        },options.timeout);
  }
}


// json转url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + '=' + encodeURIComponent(json[name]));
  }
  return arr.join('&');
}

面条请不要欺负汉堡

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax-XMLHttpRequest对象

没有xmlhttprequest时，都是采用同步的做法，有了这个对象，进行了异步(比如在填写表单时，服务器会根据你填写的内容，进行马上的验证，而不是所有信息填写完后再验证)一.创建XMLHttpRequest对象1.实例化XMLHttpRequest对象var request = new XMLHttpRequest(); (ie6一下就不支持)var request =
复制链接

扫一扫

专栏目录