[AJAX] -AJAX,你要学的,都在这儿(基础和概念部分)

prtyaa 2023-12-27 15:27:45  51667

分类专栏：资讯

ajax,与其说是一门技术,不如说是一门艺术,悄悄的改变,让世界宁静且绚烂

前面是基础的部分,后面有jQuery的封装,所以耐心学耐心看

ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2.使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

效果演示

流程说明

简略版:

1.创建ajax引擎对象

2.判断浏览器的支持方式

3.声明事件监听函数

4.创建发送ajax请求

5.其他处理

____________________________________________________________________________________________

代码概括版:

1.创建ajax引擎对象

2.判断浏览器的支持方式

3.声明事件监听函数

>3.1判断ajax状态码

监听ajax对象的属性readystate的值，一旦readystate的值发生改变就会触发声明的函数的执行

0表示ajax引擎对象创建
1:表示请求创建但是未发送ajax .open("get" , "my");
2:请求发送ajax. send(nu11);
3:请求处理完毕，正在接收响应内容
4:响应内容接收完毕(重要状态)

>3.2 判断响应状态码

ajax之响应状态码: ajax. status

200:表示-切正常
404 :资源未找到
500:服务器内部错误

>3.3获取响应信息(普通字符串和json格式的字符串)

>3.4处理响应请求

4.创建发送ajax请求

>4.1创建请求(设置请求方式,设置请求地址,设置异步或者同步)

>4.2发送请求

5.其他处理

___________________________________________________________________________________________

创建ajax引擎对象-方便占用

var ajax;
if (XMLHttpRequest){//其他浏览器
    ajax=new XMLHttpRequest();
}else if(ActiveXObject){//ie浏览器
    ajax = new ActiveXObject("Msxml2.XMLHTTP")
}else {
    alert("浏览器版本过低,请及时更新浏览器");
    return;
}

详细页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<head>
 <base href="<%=basePath%>">
    <title>ajax学习</title>
  <script type="text/javascript">
   function text() {
    location.href="my";
   }
   function textAjax() {
   //创建Ajax引擎对象
    var ajax;
       if (XMLHttpRequest){//其他浏览器
        ajax=new XMLHttpRequest();
       }else if(ActiveXObject){//ie浏览器
        ajax = new ActiveXObject("Msxml2.XMLHTTP")
       }
       //声明事件监听
    ajax.onreadystatechange=function() {
     if (ajax.readyState == 4) { //状态码为4的时候响应数据
      if (ajax.status==200){//判断响应状态 200为正常响应
            //处理响应
            //获取响应内容
            var data = ajax.responseText;
            //获取div对象
            var div = document.getElementById("showDiv");
            //响应到页面
            div.innerHTML = data;
      }else if (ajax.status==404){
       var div = document.getElementById("showDiv");
       div.innerHTML="请求支援不存在";
      }else if (ajax.status==500){
       var div = document.getElementById("showDiv");
      div.innerHTML="内部服务器繁忙"
      }
     }
    }
       //发送请求(创建)参数1.请求方式 参数2.请求URL
       ajax.open("get","my");
       //发送
       ajax.send(null);
   }
  </script>
  </head>
  <body>
  <input type="button" value="非测试ajax" onclick="text()">
  <input type="button" value="测试ajax" onclick="textAjax()">

  <hr>
  <div id="showDiv" style="width: 300px ;height: 300px;border: 1px solid red"></div>
  </body>
</html>

ajax的同步/异步执行

默认的ajax是采用异步的方式执行的,也就是参照上方代码,上方代码中一共有两个函数

第一个函数是单击创建ajax并且产生监听和发送数据

第二个函数是监听事件触发了,才会执行

从顺序和逻辑上来说,第一个函数早于第二个函数执行,这里就构成了异步

在ajax.open中有如下参数

ajax.open(
method,    //请求提交方式
url,       //请求提交路径
async,     //是否开启异步,默认值true 开启同步改为false即可
username,  //用的少不用管 
password   //用的少不用管
)

从上面的代码中可以看到是可以开启同步的

同步啥时候用呢?

如果页面中的代码依赖响应的结果和信息,那么就不能等监听器触发了才能拿到,这时候就需要同步

简单的说,就是家里没酱油了

异步的情况下是

先炒菜,然后没酱油了,孩子去打酱油

(当前js函数继续执行，无须等待aj ax请求的响应以及响应的处理。)

同步的情况时是

炒菜的同时,孩子也就去打酱油了,酱油打回来了,再炒菜

(当前js函数会等待ajax请求以及响应，当ajax响应处理完毕后，继续执行函数的剩余代码。)

也就是开启同步后,第一个含有监听函数的函数,不是第一时间执行玩,而是等待监听函数执行后(第二个函数),才执行,细品一下就知道了

同步的好处：

1、同步流程对结果处理通常更为简单，可以就近处理。

2、同步流程对结果的处理始终和前文保持在一个上下文内。

3、同步流程可以很容易捕获、处理异常。

4、同步流程是最天然的控制过程顺序执行的方式。

异步的好处：

1、异步流程可以立即给调用方返回初步的结果。

2、异步流程可以延迟给调用方最终的结果数据，在此期间可以做更多额外的工作，例如结果记录等等。

3、异步流程在执行的过程中，可以释放占用的线程等资源，避免阻塞，等到结果产生再重新获取线程处理。

4、异步流程可以等多次调用的结果出来后，再统一返回一次结果集合，提高响应效率。

同步异步的实现方式：

ajax.open(请求方式,url,同步异步);

同步false,异步true

ajax请求方式的处理(get & post)

get:

请求数据不能写在send方法中所以一直用ajax.send(null)

请求数据以?隔开的形式拼接在url的后面,有长度限制发送数据量小,且不安全

//创建请求
ajax.open("get","my?uname=张三&pwd=123",false);
//发送请求
ajax.send(null)//主要是给post请求方式用

post

需要单独的请求数据的设置

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

设置请求数据为键值对的数据,如果请求数据则ajax.send("键值对数据&键值对数据")没有就null

请求方式以包的形式传输数据,传输的数据量大无长度限制, 数据是不显示的在地址栏上,很安全

//创建请求
ajax.open("post","my",false);
//设置请求参数为键值对
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
ajax.send("uname=张三&pwd=123")

ajax响应数据--json学习

通常我们服务器响应给浏览器的ajax都是字符串类型的数据

如果数据量大,那么我们就需要在服务器端将数据拼接成一个良好的字符串数据,响应给浏览器

浏览器对得到的数据进行解析和使用.

那么就需要一个良好简便的格式来传达我们要传达的信息-json格式的字符串

json,实际上就是一种js创建对象的格式,用于保证数据的紧密性和完整性

使用原理

在服务器端将要响应的数据拼接成json格式的字符串，这样客户端(浏览器端)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象，便于数据的操作。

json格式

var 对象名 ={
键名:值名,
键名:值名
}

js中创建对象

//创建js对象
var obj={};
//声明对象内容
obj.name="张三";
obj.pwd="123";

使用json方式创建对象

var obj ={
   name:"李四",
   pwd:"123"
}

实战环节

假设后台发送了这样的一个json字符串,很明显就是一个对象

String str ="{uid:'1',uname:'王五',age:'18',fav:'看电影'}";

这时候我们就可以在js页面中用eval大法来取出数据,可以说是相当的爽

可以看到最后响应到页面的就是对象点属性名,相应相关属性内容到页面

//获取响应内容
 var data = ajax.responseText;
//使用eval方法将字符串数据转换为js对象
  eval("var obj="+data)//相当于eval("var obj={uid:'1',uname:'王五',age:'18',fav:'看电影'}")
//获取div对象
            var div = document.getElementById("showDiv");
            //响应到页面
            div.innerHTML = obj.fav;

虽然使用eval在js页面特别爽,但是!!!服务器端的处理就很头疼,这时候就需要使用gson工具类来处理

使用教程

1,导包

2.编写代码

Gson gson = new Gson();

可以将一个对象通过 Gson（）将其转变为json格式的字符串.

String json = "{
\"name\":\"张三kidou\",
\"age\":24,
\"emailAddress\":\"zhangsan@ceshi.com\",
\"email\":\"zhangsan_2@ceshi.com\",
\"email_address\":\"zhangsan_3@ceshi.com\"}";

如何将上面的json格式的字符串封装为一个对象。

User user = gson.fromJson (json,User.class);

示例:

将对象转为json格式的字符串

User user = new User("张三",24);
String jsonObject = gson.toJson (user);

gson.jar请自行百度搜索下载使用

基础和概念部分到此为止,后续会发布实战的综合使用篇

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31431

赞同 0

评论 0 条