ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Ajax学习总结(一)

2019-06-30 20:30:20  阅读:156  来源: 互联网

标签:总结 请求 get url 报文 学习 xhr Ajax post


什么是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=我');

标签:总结,请求,get,url,报文,学习,xhr,Ajax,post
来源: https://blog.csdn.net/Damon_B/article/details/94345083

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有