第四章使用jQuery处理Ajax

文章目录

[第四章使用jQuery处理Ajax](#第四章使用jQuery处理Ajax)
- [1. HTTP协议](#1. HTTP协议)
- - [1.1 HTTP协议-请求方法](#1.1 HTTP协议-请求方法)
  - [1.2 GET和POST区别](#1.2 GET和POST区别)
- [2. Ajax](#2. Ajax)
- - [2.1 原生创建Ajax的步骤](#2.1 原生创建Ajax的步骤)
  - [2.2 使用jQuery处理Ajax](#2.2 使用jQuery处理Ajax)
- [3. 跨域](#3. 跨域)
- - [3.1 同域名，同端口，同协议](#3.1 同域名，同端口，同协议)
  - [3.2 跨域解决方案](#3.2 跨域解决方案)

第四章使用jQuery处理Ajax

1. HTTP协议

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

一次HTTP操作称为一个事务，其工作过程可分为四步。

1.1 HTTP协议-请求方法

方法	说明
OPTIONS	返回服务器针对特定资源所支持的HTTP请求方法
HEAD	向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回
GET	向特定的资源发出请求
POST	向指定资源提交数据进行处理请求
PUT	向指定资源位置上传其最新内容
DELETE	请求服务器删除Request-URI所标识的资源
TRACE	回显服务器收到的请求，主要用于测试或诊断
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
PATCH	实体中包含一个表，表中说明与该URI所表示的原内容的区别

1.2 GET和POST区别

	GET	POST
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
对数据长度的限制	当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）	无限制
对数据类型的限制	只允许 ASCII 字符	没有限制，也允许二进制数据
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

2. Ajax

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

2.1 原生创建Ajax的步骤

创建Ajax对象：

非IE6语法：var oAjax = new XMLHttpRequest();
老版本IE5 和 IE6语法：var oAjax = new ActiveXObject("Microsoft.XMLHTT")

js 复制代码

if (window.XMLHttpRequest){
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	var oAjax=new XMLHttpRequest();
}else{
    // IE6, IE5 浏览器执行代码
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

连接到服务器：

open(方法，文件名，同步异步)

参数一：post/get

参数二：请求的文件名

参数三：同步（false）异步（true）

oAjax.open("GET","abc.txt",true);

发送请求：

send()

oAjax.send();

接收返回值：

js 复制代码

oAjax.onreadystatechange=function(){
    if (oAjax.readyState==4 && oAjax.status==200){
            alert("请求成功"+oAjax.responseText);
    }
    else{
            alert("请求失败"+oAjax.status);
    }
}

2.2 使用jQuery处理Ajax

$.ajax() 方法

通过 HTTP 请求加载远程数据jQuery.ajax([settings]);

js 复制代码

$("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });

$.ajax() 方法-参数：

参数	类型	描述
options	Object	可选，AJAX 请求设置，所有选项都是可选的
async	Boolean	默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
cache	Boolean	默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面
data	String	发送到服务器的数据
dataType	String	预期服务器返回的数据类型
error	Function	请求失败时调用此函数
success	Function	请求成功后的回调函数
jsonp	String	在一个 jsonp 请求中重写回调函数的名字
jsonpCallback	String	为 jsonp 请求指定一个回调函数名

$().load()方法

从服务器加载数据，并把返回的数据放入被选元素中$(selector).load(URL,data,callback);
$.get() 方法

通过 HTTP GET 请求从服务器上请求数据$.get(URL,callback);
$.post() 方法

通过 HTTP POST 请求从服务器上请求数据$.post(URL,data,callback);

3. 跨域

跨域，指的是浏览器不能执行其他网站的脚本

产生跨域的原因：由浏览器的同源策略造成的（同域名，同端口，同协议）

3.1 同域名，同端口，同协议

3.2 跨域解决方案

CORS跨域资源共享

服务端：header("Access-Control-Allow-Origin:*");

"*"表示所有的域都可以接受
jsonp

动态创建script标签，使用jQuery的jsonp请求

只能用get方法，不能使用post方法
基于iframe实现跨域

在两个页面中同时添加document.domain

只有主域名相同的情况下方可使用此方法：

baidu.com , a.baidu.com , b.a.baidu.com

三个不同的域名，但是主域名是相同的
web sockets

只有在支持web sockets协议的服务器上才能正常工作

第四章 使用jQuery处理Ajax

文章目录

第四章 使用jQuery处理Ajax

1. HTTP协议

1.1 HTTP协议-请求方法

1.2 GET和POST区别

2. Ajax

2.1 原生创建Ajax的步骤

2.2 使用jQuery处理Ajax

3. 跨域

3.1 同域名，同端口，同协议

3.2 跨域解决方案

第四章使用jQuery处理Ajax

第四章使用jQuery处理Ajax