ajax赋值给h1,Ajax技术运用

什么是Ajax?

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

传统Web应用中简易的同步模型分析：

基于Ajax技术的异步请求响应模型分析：

做一个入门的Demo

首先打开百度的首页，在控制台编码。

var xhr=new XMLHttpRequest(); //第一步：创建XMLHttpRequest对象xhr.onreadystatechange=function(){ //第二步：如果状态改变，将触发这个函数if(xhr.readyState==4&&xhr.status==200){ //状态有0 1 2 3 4 五种，返回数据成功的状态为200console.log(xhr.responseText); //在控制台打印返回的数据}}xhr.open("GET","https://www.baidu.com",true); //第三步：创建连接xhr.send(null); //第四步：发送请求，GET方式的请求，参数可以为null

请求结果展示：

基于SpringBoot项目下实验

设置端口

server.port=80

创建AjaxController

package com.cy.pj.ajax.controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RestController;@RestControllerpublic class AjaxController {@GetMapping("doAjaxGet")public String doAjaxget() throws InterruptedException {System.out.println("=====start doAjaxGet=====");Thread.sleep(5000);return "Ajax Get Request Result";}}

创建ajax01-html

Title

The Ajax 01 Page

Ajax 异步请求Ajax Get Request Loading data ....

function doAjaxGet(){//这个方法运行于浏览器进程内部的主线程(main)中//1.创建XHR对象(此对象是ajax技术应用的入口对象,发送异步请求,处理响应结果都是通过此对象实现)var xhr=new XMLHttpRequest();//2.设置状态监听xhr.onreadystatechange=function(){//事件监听函数(处理客户端与服务端通过过程中产生的数据)//readyState的值0,1,2,3,4//0.表示还未执行open方法//1.表示已执行open方法但还未执行send方法//2.表示已执行send方法//3.表示客户端正在接收服务端响应的数据//4.表示客户端已经完成响应数据的接收if(xhr.readyState==4&&xhr.status==200){//xhr.status==200 表示服务端的处理过程是OK的var result=xhr.responseText;//获取服务端响应的文本数据document.getElementById("resultId").innerHTML=result;}}//3.建立与服务端的连接xhr.open("GET","http://localhost/doAjaxGet",true);//true表示异步请求,false表示同步,请求会在main线程发送//4.发送请求xhr.send(null);//将请求交给ajax引擎console.log("do other .....");//run main thread}

小结：①当xhr.open()函数的最后的参数为false时，启动的是main线程，不推荐使用main线程，参数一般都是使用true。

②readyState的值有0,1,2,3,4

0.表示还未执行open方法1.表示已执行open方法但还未执行send方法2.表示已执行send方法3.表示客户端正在接收服务端响应的数据4.表示客户端已经完成响应数据的接收。

传参数的Demo

get方式

post方式

创建ajax02-html

Title

The Ajax 02 Page

Ajax 表单请求Save

function doSave(){//发送异步请求,检查name是否存在//1.创建xhr对象(Ajax技术应用的入口)let xhr=new XMLHttpRequest();//2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;}}//3.建立Get连接(get请求传参数,要将参数拼接到url中)let name=document.forms[0].name.value;//获取表单中name对应的value属性值console.log("name",name);let url="http://localhost/doSave";xhr.open("POST",url,true);//post请求假如需要向服务端传递参数,则必须在open之后设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.发送异步POST请求(参数需要写到send方法内部)-表单数据或数据量比较大时xhr.send(`name=${name}`);//通过模板字符串``和${}表示拼接url}function doCheck(){//发送异步请求,检查name是否存在//1.创建xhr对象(Ajax技术应用的入口)let xhr=new XMLHttpRequest();//2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;}}//3.建立Get连接(get请求传参数,要将参数拼接到url中)let name=document.forms[0].name.value;//获取表单中name对应的value属性值//let name=document.getElementById("nameId").value;//基于节点id获取//let name=document.querySelector("#nameId").value;//基于id选择器(前缀"#")//let name=document.querySelector(".mingzi").value;//基于class选择器(前缀".")//let name=document.querySelector("input").value;console.log("name",name);let url=`http://localhost/doCheck?name=${name}`;//通过模板字符串``和${}表示拼接urlxhr.open("GET",url,true);//4.发送异步请求xhr.send(null);}

Ajax 关键代码的封装

为了使代码更简洁，我们把要写ajax部门的代码进行封装，提取共性代码，特性作为参数传递。

首先，理解JavaScript中的回调函数

在实际编程过程中我们通常会封装代码共性,提取代码特性.然后来提高代码的可重用性.例如:

第一步:封装AJax Get请求，关键代码分析如下：

function doAjaxGet(url,params,callback){//1.创建XmlHttpRequest对象var xhr=new XMLHttpRequest();//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)xhr.onreadystatechange=function(){//callback(回调函数)//基于xhr对象获取的通讯状态，对响应数据进行处理//readyState状态说明//0：未初始化，尚未调用open() 方法//1：启动。已经调用open() 方法，但尚未调用send() 方法//2：发送。已经调用send() 方法，但尚未接收到响应//3：接收。已经接收到部分响应//4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果callback(xhr.responseText);}}//3.创建与服务端的连接xhr.open("GET",url+"?"+params,true);//true表示异步//4.发送请求xhr.send(null); //Get请求，send方法不传内容//5.对响应结果进行处理(在回调函数中处理)。}

第二步:封装AJax Post请求，关键代码分析如下：

function doAjaxPost(url,params,callback){//1.创建XmlHttpRequest对象var xhr=new XMLHttpRequest();//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.xhr.onreadystatechange=function(){//callback(回调函数)//基于xhr对象获取的通讯状态，对响应数据进行处理if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了//服务端响应的结果会传递给XHR对象，//我们可以借助xhr.responseText获取响应结果callback(xhr.responseText);}}//3.创建与服务端的连接xhr.open("POST",url,true);//true表示异步xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.发送请求xhr.send(params); //post请求将参数写到send方法//5.对响应结果进行处理(在回调函数中处理)。}

第三步:在业务方法中应用封装好的代码,例如:

保存业务的关键客户端代码分析及实现.

function doSave(){//1.定义请求urlvar url="doSave";//2.定义请求参数var params="name="+document.forms[0].name.value;//3.发送异步的post请求doAjaxPost(url,params,function(result){document.getElementById("result").innerHTML=result;})}

检查名字是否存在的关键客户端代码实现

function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在//1.定义请求urlvar url="doCheck";//2.定义请求参数var name=document.forms[0].name.value;var params="name="+name;//3.发送异步Get请求doAjaxGet(url,params,function(result){document.getElementById("result").innerHTML=result;})}

图文梳理

为了实现一个简单地ajax框架，需要去补充的知识：对js对象的理解，对js函数的理解，回调函数，原型对象，函数自调用。

实现一个简单的Ajax框架

创建ajaxfk.js并进行编码

(function(){//函数的自调用//第一步.定义构造函数let ajax=function(){}//第二步.在构造函数的原型对象上添加函数(这样的函数在基于构造函数构建的js对象中共享)ajax.prototype={doAjaxGet:function (url,params,callback){//1.创建xhr对象(Ajax技术应用的入口)let xhr=new XMLHttpRequest();//2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback(xhr.responseText);}}//3.建立Get连接(get请求传参数,要将参数拼接到url中xhr.open("GET",`${url}?${params}`,true);//4.发送异步请求xhr.send(null);},doAjaxPost:function (url,params,callback){//封装共性(不变的),提取特性(可能会经常变化的)//1.创建xhr对象(Ajax技术应用的入口)let xhr=new XMLHttpRequest();//2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback(xhr.responseText);//处理响应数据}}//3.建立Get连接(get请求传参数,要将参数拼接到url中)xhr.open("POST",url,true);//post请求假如需要向服务端传递参数,则必须在open之后设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.发送异步POST请求(参数需要写到send方法内部)-表单数据或数据量比较大时xhr.send(params);}}//3.第三步:基于ajax构造函数构建ajax对象,并将对象赋值给一个全局变量window.$$=new ajax();})()

创建ajax-04.html

Title

The Ajax 04 Page

Ajax 表单请求Save

function doSave(){//发送异步请求,检查name是否存//1.定义请求urllet url="http://localhost/doSave";//2.定义请求参数let name=document.forms[0].name.value;let params=`name=${name}`;//3.发送异步请求并处理响应结果$$.doAjaxPost(url,params,function(result){document.getElementById("result").innerHTML=result;})}function doCheck(){//发送异步请求,检查name是否存在//1.定义请求urllet url="http://localhost/doCheck";//通过模板字符串``和${}表示拼接url//2.定义请求参数let name=document.forms[0].name.value;//获取表单中name对应的value属性值//3.发送异步请求并处理响应结果$$.doAjaxGet(url,`name=${name}`,function(result){document.getElementById("result").innerHTML=result;})//底层还是借助XmlHttpRequest对象发送请求}

总结

总结是学完必须完成的事情！

举报/反馈