AJAX

原生AJAX

get

<script type="text/javascript">
	window.onload = function() {
		var btn01 = document.getElementById("btn01");
		btn01.onclick = function() {
			//1.创建xhr对象
			var xhr = new XMLHttpRequest();
			//2.设置请求信息
			xhr.open("get", "/web_ajax/AServlet1?t=" + Math.random());
			//3.发送请求
			xhr.send();
			//4,.接收响应信息
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var text = xhr.responseText;
					alert(text);
				}
			}
		}
	}
</script>

POST

	//获取id
	var btn02 = document.getElementById("btn02")
	//绑定单击响应函数
	btn02.onclick = function() {
		//1.创建xhr对象
		var xhr = new XMLHttpRequest();
		//2.设置请求信息
		xhr.open("post", "/web_ajax/AServlet");
		//3.发送请求信息
		//Content-Type: "application/x-www-form-urlencoded"
		//当使用post请求的时候，需要加上以下这句话
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("name=sunwukong");
		//4.接受响应信息
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				var text = xhr.responseText;
				alert(text);
			}
		}
	}

使用get与post方式实现ajax区别

发送方式	步骤三：初始化XMLHttpRequest对象	步骤四：发送请求
GET	xhr对象open()方法中的method参数为get	xhr对象send()方法中的data参数为null
POST	xhr对象open()方法中的method参数为post，指定xhr对象要请求的HTTP头信息，该HTTP请求头信息为固定写法	可以指定xhr对象send()方法中的data参数的值，即该请求需要携带参数的具体数据

---

---

---

基础知识点补充

1.回调函数

当我们将函数A传递给函数B，并且由B来执行A时，A就成了一个回调函数（callback functions），如果此时A还是一个无名函数，那么就叫它匿名回调函数。

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

//定义一个以两个函数为参数的函数，该函数会分别执行这两个参数函数，
//并返回它们的返回值之和
function invoke_and_add(a,b){
  return a() + b();
}
//简单定义参与运算的函数
function one(){
  return 1;
}
function two(){
  return 2;
}
//将这两个函数传递给目标函数
invoke_and_add(one ,two);

在这里我们可以用匿名函数来代替上面参与运算的两个函数，作为目标函数的参数：

function invoke_and_add(a,b){
  return a() + b();
}
invoke_and_add(function(){return 1;},function(){return 2;})

2.js对象

<script type="text/javascript">
  //js也是一种面向对象的语言，java中是基于类的，而js中是基于原型的
  第一种方式：不常用
  var obj = new Object();
  第二中方式：常用
  //js可以动态的添加属性
  //对象.属性名=属性值
  var obj2 = {};
  //给属性赋值
  obj2.name = "sunwuk";
  //给属性赋一个函数
  obj2.fun = function() {
  	alert("hello~~~");
  }
</script>

3.json

json对象：var obj3 = {name : “张三”,age : “18”,gender : “男”};
json字符串： var jsonObje = ‘{“name” : “sunwukong”,“age” : “20”,“gender” : “男”}’;

  //json--->对象
  var obj =JSON.parse(json字符串);
  //对象----->json
  var str=JSON.stringify(json对象);