JS day05笔记

一.Ajax
1)定义:
Ajax = 异步 JavaScript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。
2) 优点:1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力
缺点:1.破坏了浏览器前进和后退机制（因为ajax自动更新机制）
2.一个Ajax请求多了，也会出现页面加载慢的情况。
3.搜索引擎的支持程度比较低。
4.ajax的安全性问题不太好（可以用数据加密解决）。
二.Ajax实现步骤
1)ajax的使用及实现步骤
   1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
   3.设置响应HTTP请求状态变化的函数.
   4.发送HTTP请求.
   5.获取异步调用返回的数据.
   6.使用JavaScript和DOM实现局部刷新.
2)发送请求的步骤
1.得到XMLHttpRequest对象 new XMLHttpRequest()
2.准备请求 open(请求类型GET/POST,请求的URL,是否异步)
xhr.open(请求类型GET/POST,请求的URL,是否异步);
3.发送请求 send([参数]) xhr.send([参数])
注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
如果是POST请求，无参数设置为null，有参数则设置参数即可
4.判断响应状态，得到后台响应 xhr.responseText;
三.Ajax的封装
封装Ajax
1、得到XMLHttpRequest对象 new XMLHttpRequest()
2、打开请求 open(请求类型GET/POST,请求的URL,是否异步) 注：三个参数都是由调用者传递
注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
3、发送请求 send([参数]) xhr.send([参数])
注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
如果是POST请求，无参数设置为null，有参数则设置参数即可
4、判断响应状态，得到后台响应 xhr.responseText;
注：判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据
四.Jquery Ajax

1. jquery 调用 ajax 方法： 格式：$.ajax({});
   参数：
   type：请求方式 GET/POST
   url：请求地址 url
   async：是否异步，默认是 true 表示异步
   data：发送到服务器的数据
   dataType：预期服务器返回的数据类型
   contentType：设置请求头
   success：请求成功时调用此函数
   error：请求失败时调用此函数
   2)1.get请求
   例: 1.请求 json 文件，忽略返回值
   $.get(“js/data.json”);
   2.请求 json 文件，传递参数，忽略返回值 $.get(“js/data.json”,{“uname”:“zhangsan”});
   3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
   $.get("js/data.json",function(data)console.log(data););4.请求json文件,传递参数,拿到返回值$.get(“js/data.json”,{“uname”:“zhangsan”},function(data){console.log(data);});
   2. post请求
   1.请求 json 文件，忽略返回值
   $.post(’…/js/cuisine_area.json’);
   2.请求 json 文件，传递参数，忽略返回值
   $.post(’…/js/cuisine_area.json’,{name:“tom”,age:100});
   3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
   $.post(’…/js/cuisine_area.json’,function(data){console.log(data)});
   4.请求 json 文件,传递参数,拿到返回值
   $.post(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){
   console.log(data)});