Ajax学习总结（一）

什么是AJAX？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

提交数据方式 GET or POST?

• GET方式

   1. 数据是拼接在url中
   2. 数据的安全性不好
   3. 数据的长度问题
       理论上来说，url的长度是可以任意修改的。
       有一些浏览器会限制url的长度。
       有一些服务器 对于长度太长的url直接就屏蔽了
   4. 测试方便
  

  格式 ： xxx.php?key1=value1&key2=value2&key3=value3

   eg. 	getData.php?food=榴莲&doType=高压锅炖
  

• POST方式

    1. 提交的数据不在url中，安全性好一些
    2. post提交数据没有长度限制，浏览器端只要你想随意添加，
    	 服务器可以选择是否接受这么多的数据
    4. 如果要上传文件 必须使用 post
    
    注意：
    	post提交数据是由action属性提交的url,必须设置method为post(因为默认是get)
    	
    	上传文件时，表单的form表单属性也需要填写清楚：
    	      enctype：
    	      		 默认值是 application/x-www-form-urlencoded
           		 提交文件 multipart/form-data
  

请求报文 vs 响应报文是什么？

• 请求报文

  1. 请求行

    	请求方式
    	请求地址
  

  2.请求头

    	浏览器的信息
    	接受的语言格式
    	等一些浏览器的信息以及想要发给服务器的信息
  

  3.请求主体

    	发给服务器的数据内容
  

• 响应报文

  1.状态行

    请求是否成功
    请求状态：200 = 成功 ；404 = 页面不存在 ； 304 = 被缓存了
  

  2.响应头

    服务器的一些信息
    服务器想要告诉浏览器的一些信息
  

  3.响应主体

    正常用户看到的内容 
  

补 充：

浏览器中获取html页面，css js请求后台页面，
	发送的都是 请求报文
	服务器返回的是 响应报文
	使用请求报文 响应报文这种方式进行数据的交互称之为HTTP协议		

GET方法发送数据

1. 创建 异步对象
	var xhr = new XMLHttpRequest();

2.设置请求行 （get请求 数据写在url后面）
	xhr.open('get','xxx.php?name=coups&skill=dance');
	eg.
			xhr.open('get','getData.php?name=coups&skill=dance');
	
3.设置请求头
	get请求可以省略设置请求头的操作，post不发送数据也可以省略

3.5.注册回调函数（请求响应回来之后触发）	
	xhr.onload = function(){
		//获取数据
		console.log(xhr.responseText);
	}

4.请求主体发送
	（get请求为空，或者写null，post请求数据写这里。如果没有数据，直接为空或者写null）
	send(null);

POST方法发送数据

1. 创建 异步对象
	var xhr = new XMLHttpRequest();

2.设置请求行 （get请求 数据写在url后面）
	xhr.open('post','getData.php');
	
3.设置请求头
	(get请求可以省略设置请求头的操作，post不发送数据也可以省略)
	xhm.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	

3.5.注册回调函数（请求响应回来之后触发）	
	xhr.onload = function(){
		//获取数据
		console.log(xhr.responseText);
	}

4.请求主体发送
	（get请求为空，或者写null，post请求数据写这里。如果没有数据，直接为空或者写null）
	// post请求发送数据 写在send中
	//key=value&key2=value2
	xhr.send('name=崔胜澈?like=我');