第四章 使用jQuery处理Ajax

第四章 使用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")

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();

接收返回值：

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]);

  $("#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协议的服务器上才能正常工作

原文地址：https://blog.csdn.net/weixin_62008675/article/details/142969283

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！