及其封装(上)

学习目标

节数	知识点	要求
第一节（什么是ajax）	什么是ajax	掌握
Ajax能做什么	掌握
客户端和服务端	了解
第二节（ajax步骤）	XmlHttpRquest对象	掌握
get请求	掌握
Post请求	掌握
状态码和http协议码	掌握
第三节（jquery的ajax）	Jquery的ajax	掌握
解析json数据	掌握
第四节（jquery的ajax方法）	Jquery的ajax使用	掌握
Jquery回调函数	掌握
浏览器输入url到页面显示	了解

第一节 Ajax与http

术语ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)，但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技术，它是表示一些技术的混合交互的一个术语（JavaScript、Web浏览器和Web服务器），它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。

1.1 什么是Ajax？

Ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互

1.2 Ajax可以做什么？

• 显示新的HTML内容而不用载入整个页面

• 提交一个表单并且立即显示结果

• 登录而不用跳转到新的页面

• 星级评定组件

• 遍历数据库信息加载更多而不刷新页面

本章作业

Ajax是什么 有什么用

第二节 Ajax请求步骤

2.1 Ajax请求分4步完成

\1. 创建XMLHttpRequest对象

\2. 准备发送请求 open()

\3. 发送请求数据 send()

\4. 请求返回的回调函数 onreadystatechange=function(){}

XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。 通俗上来说将此对象称为request请求对象、请求对象或请求。

2.1.1创建ajax步骤

1.创建XMLHttpRequest对象--进行ajax请求

对象用来在【浏览器】与【服务器】之间传送数据 浏览器提供给我们的对象

var xhr=new XMLHttpRequest();

2.准备发送数据open()方法

语法：xhr.open(‘请求类型’，’url地址’，是否异步);

xhr.open('get','02-post.php',true);

方法	描述
open(*method*,*url*,*async*)	规定请求的类型、URL 以及是否异步处理请求。 · method：请求的类型；GET 或 POST · url：文件在服务器上的位置 · async：true（异步）或 false（同步）

3.发送 send() 实际发送的数据 get请求为空 null

xhr.send(null);

4.回调函数onreadystatechange属性指向一个回调函数。

当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。

xhr.onreadystatechange=function(){

​ if(xhr.readyState==4){//表示服务器数据已经完全接收

​ if(xhr.status==200){//, OK，访问正常

​ console.log(xhr.responseText)

​ }

​ }

​ }

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

2.1.2 readyState状态码

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

2.1.3 get有参

document.querySelector('.btn').onclick=function(){

​ var username=document.querySelector('.name').value;

​ var password=document.querySelector('.psd').value;

​ var xhr=new XMLHttpRequest();

​ xhr.open('get','06ajax_get.php?userName='+username+'&passWord='+password,true);

​ xhr.send();

​ xhr.onreadystatechange=function(){

​ if(xhr.readyState==4){

​ if(xhr.status==200){

​ console.log(xhr.responseText);

​ }

​ }

​ }

​ }

2.1.4 post有参

document.querySelector('.btn').onclick=function(){

​ var username=document.querySelector('.name').value;

​ var password=document.querySelector('.psd').value;

​ var xhr=new XMLHttpRequest();//new Date()

​ xhr.open('post','06ajax_get.php',true);

​ vardata='userName='+username+'&passWord='+password; xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");

​ xhr.send(data);

​ xhr.onreadystatechange=function(){

​ if(xhr.readyState==4){

​ if(xhr.status==200){

​ console.log(xhr.responseText);

​ }

​ }

​ }

​ }

2.1.5 获取json数据

document.querySelector('.btn').onclick=function(){

​ var xhr=new XMLHttpRequest();//new Date()

​ xhr.open('get','data/data.json',true);

​ xhr.send();

​ xhr.onreadystatechange=function(){

​ if(xhr.readyState==4){

​ if(xhr.status==200){

​ var dataJson=JSON.parse(xhr.responseText);

​ console.log(dataJson);

​ var books=dataJson.data;

​ for(var i=0;i<books.length;i++){

​ var lis=document.createElement('li');

​ lis.innerHTML=books[i].name;

​ document.getElementById('ul').appendChild(lis);

​ }

​ }

​ }

​ }

​ }

【json数据】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fFk4yRm-1608259116277)(020801及其封装(上)].assets/image004.jpg)

2.1.6 XMLHttpRequest兼容

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

【代码演示】

var xmlhttp;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest(); }

else {// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

2.1.7 timeout

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofNKZNS8-1608259116285)(020801及其封装(上)].assets/image008.jpg)

本章作业

1.默写ajax请求步骤

2.get传递参数post传递参数

3.json数据解析

第三节 jquery的ajax

3.1 Ajax步骤

$('#btn').click(function(){

​ var name=$(".name").val();

​ $.ajax({

​ type:'post',//请求方式

​ url:'09jquery_ajax.php',

​ data:{

​ uname:name,

​ },

​ success:function(res){

​ console.log(res);

​ $(".info").html(res);

​ },

​ error:function(){

​ console.log("请求失败");

​ },

​ beforeSend:function(){//请求数据之前 执行的内容

​ console.log("数据请求中.....");

​ $(".info").html('数据请求中.....');

​ },

​ })

​ })

3.2 回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。

error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象

dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。

success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

3.2.1防止重复数据

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。

举个例子：

// 提交表单数据到后台处理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按钮防止重复提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success") {
            //清空输入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

3.2.2模拟Toast效果

ajax请求服务器加载数据列表时提示loading(“加载中，请稍后...”),

$.ajax({
    type: "post",
    contentType: "application/json",
    url: "/Home/GetList",
    beforeSend: function () {
        $("loading").show();
    },
    success: function (data) {
        if (data == "Success") {
            // ...
        }
    },
    complete: function () {
        $("loading").hide();
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

本章作业

1.jquery的ajax步骤

2.beforeSend() complete()函数使用

第四节jquery的ajax方法

4.1 jquery封装的ajax方法

$.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.php", {},function(data){
          alert("Data Loaded: " + data);
},’json’);

$.getJSON(url, [data], [callback])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

$.post (url, [data], [callback],[type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post("test.php", { name: "John", time: "2pm" },
          function(data){
          process(data);
          }, "xml");

4.2 从浏览器输入url地址，到页面最终渲染完成，中间发生了什么

1.DNS解析 将域名地址解析为ip地址

2.TCP连接 - TCP三次握手

第一次握手：由客户端发起，告诉服务端我将要发送请求了

第二次握手：由服务端发起，告诉客户端我知道了，你放马过来

第三次握手：由客户端发起，告诉服务端我知道了，你真的要发了，你赶紧准备接受

\3. 发送请求 请求报文

\4. 接受响应

\5. 响应请求 处理数据

\6. 发送数据 响应数据

\7. 渲染页面

\8. 断开连接 - TCP四次挥手

第一次挥手：由服务端发起，告诉客户端东西（请求报文）接受完了

第二次挥手：由客户端发起，告诉服务端，那好，我关闭了发送东西的接口

第三次挥手：由客户端发起，告诉服务端东西（响应报文）接受完了

第四次挥手：由服务端发起，告诉客户端我准备关闭了，你也准备关闭吧