ajax调用的画面上session为空_及其封装(上)

学习目标

第一节 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);

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状态码

2.1.3 get有参

document.querySelector(’.btn’).οnclick=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’).οnclick=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’).οnclick=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

本章作业

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) { http://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) { http://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四次挥手

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

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

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

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