jQuery学习笔记——使用jQuery处理Ajax

一、HTTP协议

HTTP协议(HyperText Transfer Protocol):超文本传输协议,协议就是一种约定,一种规范,规定了浏览器和服务器之间互相通信的一种规则,所有的WWW文件都必须遵守这个规则,约定就是请求(浏览器向服务器通信)和响应(服务器根据请求进行处理,返回给浏览器的结果)

请求报文:包括请求行、请求头、空行、请求体

请求行:post/get/put(请求方式) 、ie=utf-8(请求地址)、HTTP/1.1(HTTP的版本号)

请求头:Host:www.baidu.com(主机地址)、 cookie 、Content-Type(请求的格式)...

请求体:只是针对pos(get直接通过地址栏进行传输),例如:username=zhangsan&&pwe=1223

响应报文:包括响应行、响应头、空行、响应体

响应行:HTTP/1.1(版本号)  200(状态码) ok

响应头:Content-Type(响应的格式):text/html;charset=uft-8(编码方式)  Content-length:2048(响应文件的大小)

响应体(纯文本、html、json):
     
		
		
			

哈哈

状态码:404找不到服务器资源 403:被禁止 401:没权限 500:服务错误 200:响应成功

HTTP协议GET和POST区别

1.缓存

get:能被缓存
post:不能缓存

2.编码类型

get:application/x-www-form-urlencoded
post:application/x-www-form-urlencoded或multipart/form-data,二进制数据使用多重编码

3.历史

get:参数保留在浏览器历史中
post:参数不会保存在浏览器历史中

4.数据大小

get方式有数据大小要求,不超过2kb
post方式无数据大小的要求

5.对数据类型的限制

get:只允许ASCII字符
post:没有限制,也允许二进制数据

6.安全性

get方式:安全性低,对于敏感数据,不建议使用get方式
post方式:安全性较高

7.可见性

get:数据在URL中对所有人都是可见的
post:数据不会显示在URL中

二、Ajax

1.简介

Asynchronous JavaScript and XML (异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

用js通过http协议向服务器发送xml数据,目前json数据比较流行

Ajax 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

jQuery学习笔记——使用jQuery处理Ajax_第1张图片
Web的传统模型。客户端向服务器发送一个请求,服务器返回整个页面,如此反复在Ajax模型中,数据在客户端与服务器之间独立传输。服务器不再返回整个页面
在Ajax模型中,数据在客户端与服务器之间独立传输。服务器不再返回整个页面

  1. 不用刷新整个页面便可与服务器通讯的办法:

    Flash

    Java applet

    框架:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面

    隐藏的iframe

    XMLHttpRequest:该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

  2. Ajax优缺点

    优点:

    Ajax使用Javascript技术向服务器发送异步请求

    Ajax无须刷新整个页面

    因为服务器响应内容不再是整个页面,而是页面中的局部,所以Ajax性能高

    缺点:

    AJAX并不适合所有场景,很多时候还是要使用同步交互

    AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大

    因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题(IE5,IE6)

  3. 创建XMLHttpRequest对象

    Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
    
    其他浏览器(Firefox、Safari、Opera…)把它实现为一个本地的JavaScript对象
    
    XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。
    
  4. 原生创建Ajax的代码

<script>
			window.onload = function(){
				var btn1 = document.getElementById("btn1");
				btn1.onclick=function(){
				// 1.创建XMLHttpRequest对象
				// 考虑ie浏览器的兼容性问题
				if(window.XMLHttpRequest){
					// ie7以上,火狐,谷歌,苹果,欧朋
					var oAjax = new XMLHttpRequest();
				}else{
					// ie6,ie5
					var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
				}
				// 2.对发送请求进行初始化,调用open方法
				// open("请求方式","请求地址","同步(false)异步(true)")
				oAjax.open("GET","服务器地址",true);
				// 3.发送请求
				oAjax.send();
				// 4.为XMLHttpRequest添加OnReadystatechange事件
				// 当服务器信息返回过来的时候调用,每个请求状态码都会触发这个事件
				oAjax.onreadystatechange=function(){
					// onreadystatechange与服务器发生交互时触发这个事件
					// 可以根据状态码确定服务器有没有发送过来内容
					/**
					 * readystate:表示Ajax请求的当前状态,告诉我们浏览器和服务器进行到哪一步了
					 * 0:初始化
					 * 1:服务器已经建立连接
					 * 2.请求已被接受(执行完send方法了)
					 * 3:请求处理中
					 * 4:请求完成,响应就绪了
					 */
					// 5.判断有没有发送完成
					if(oAjax.readyState == 4){
						// 6.判断是否响应完成
					/**
					 * state:状态码
					 * 404 没找到页面(not found)
					 * 403 禁止访问(forbidden)
					 * 500 内部服务器出错(internal service error)
					 * 200 一切正常(ok)
					 * 304 没有被修改(not modified)
					 */
						
						if(oAjax.status == 200){
							// 7.打印响应内容
							// responseText 属性包含了从服务器发送的数据,当 readyState 属性值变成 4 时, responseText 属性才可用
							alert("请求响应成功:"+oAjax.responseText);
						}else{
							alert("请求失败:"+oAjax.status);
						}
					}
				}
				}
			}
		</script>
	<body>
		<button id="btn1">提取内容</button>
	</body>

三、使用jQuery处理Ajax

1.$.ajax() 方法

格式 :$.ajax({})

参数(以键值对的方式存在): type:请求方式get/post
						 url:请求地址
						 data:请求是发送给服务器的数据
						 dataType:预期服务器返回的数据类型
						 async:是否是异步,如果是false就是同步,true是同步,默认为异步
						 contentType:设置请求头
						 success:请求成功后调用此函数
						 error:请求失败后调用此函数

实例(访问静态数据):

<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.12.4.js" ></script>
		<script>
			/**
			 * jQuery调用ajax方法 常用方法
			 * 格式 :$.ajax({})
			 * 参数(以键值对的方式存在):
			 * 	type:请求方式get/post
			 *  url:请求地址
			 *  data:请求是发送给服务器的数据
			 *  dataType:预期服务器返回的数据类型
			 *  async:是否是异步,如果是false就是同步,true是同步,默认为异步
			 *  contentType:设置请求头
			 *  success:请求成功后调用此函数
			 *  error:请求失败后调用此函数
			 */
			$(function(){
				$("#btn1").click(function(){
				  $.ajax({
						type:"get",
						url:"data.txt",
						data:{
						    // 请求的数据,json对象
							// 如果没有请求参数,不需要添加
							username:"zhangsan"
						},
						// 预期返回的数据类型,在接受服务器返回值的时候会自动封装成json类型的,前提是返回的格式必须是json类型的
						dataType:"json",
						// 请求成功以后调用回调函数
						// 此处data是一个形参,代表的是服务响应过来的数据
						success:function(data){
							//console.log(data);							
							var $ul = $("
    "
    ); // 遍历返回的数据数组 for (var i = 0; i < data.length; i++) { // 得到数组中的每一个元素 var user = data[i]; // 创建li,把每个元素的Username添加到li里面 var li = "
  • "+user.userName+"
  • "
    ; // 把li添加到ul中 $ul.append(li); } // 将Ul添加到body里 $("body").append($ul); } }) }) }) </script> </head> <body> <button id="btn1"> 获取值 </button> </body>

    2.$.get() 方法

    格式:
    $.get(URL,callback);
    URL必需参数,路径     callback可选参数,请求成功后所执行的函数名
    

    实例(访问静态数据):

    <head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
    		<script>
    			$(function(){
    				/**
    				 * $.get("请求地址","请求参数列表","回调函数","预计服务器返回的数据格式")
    				 */
    				$("#btn1").click(function(){
    					$.get("js/data.txt",{},function(data){
    						var $ul = $("
      "
      ); // 遍历返回的数据数组 for (var i = 0; i < data.length; i++) { // 得到数组中的每一个元素 var user = data[i]; // 创建li,把每个元素的Username添加到li里面 var li = "
    • "+user.userName+"
    • "
      ; // 把li添加到ul中 $ul.append(li); } // 将Ul添加到body里 $("body").append($ul); },"json") }) }) </script> </head> <body> <button id="btn1">get</button> </body>

      3.$.post() 方法

      语法格式
      $.post(URL,data,callback);
      data可选参数,连同请求发送的数据
      

      你可能感兴趣的:(jquery)