“阿贾克斯”基础

最新推荐文章于 2023-10-09 13:27:04 发布

成就如何？

最新推荐文章于 2023-10-09 13:27:04 发布

阅读量2.2k

点赞数 2

分类专栏： ajax-笔记文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/qq_45720822/article/details/121209739

版权

本文详细介绍了Ajax的基础知识，包括XMLHttpRequest的使用，从原生JavaScript实现到jQuery的$.get(), $.post(), $.ajax()方法。同时，文章探讨了Json的概念、优势和语法，以及如何在JavaScript中解析Json。最后，讨论了jQuery中的延迟对象——Deferred，用于解决异步请求的回调问题。" 89388955,6875319,input框不可编辑的三种方法及其优缺点分析,"['前端开发', 'HTML', 'CSS', 'JavaScript', 'Web表单']

摘要由CSDN通过智能技术生成

Ajax

一、AJAX简介

异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。它是一系列交互式网页应用技术的结合体，包含知识有：

1）基于XHTML和CSS标准的表示；

2）使用Document Object Model（DOM）进行动态显示和交互；

3）使用XMLHttpRequest与服务器进行异步通信；

4）使用JavaScript绑定一切

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新；而传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、XMLHttpRequest

XMLHttpRequest是AJAX的核心对象，用于实现发送和接收HTTP请求与响应信息。

1、原生JavaScript实现Ajax

步骤：

1、编写Servlet程序，并把数据通过PrintWriter对象输出注意：以前同步请求时，我们必须把数据放作用域对象中，然后转发或重写向到JSP页面中（ JSTL+EL ）

// 第一：定义一个类，并继承HttpServlet
// 第四：定义Servlet程序的访问URL地址
@WebServlet("/demo.do")
public class HelloServlet extends HttpServlet {
   
    // 第二：重写 service方法
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
        // 设置响应的内容类型 和 编码
        resp.setContentType("text/html;charset=utf-8");
        // 第三：在service方法编写代码，实现具体的业务功能
        PrintWriter out = resp.getWriter();

        out.println("你好,IDEA");

        out.flush(); //清空缓冲区
        out.close();
    }
}

2、创建XMLHttpRequest对象，用于实现发送和接收HTTP请求与响应信息 let xmlHttp = new XMLHttpRequest();

 // 第一：创建XMLHttpRequest对象
 let xmlHttp = new XMLHttpRequest();

3、初始化HTTP请求参数（调用open方法） xmlHttp.open(“get|post”,“Servlet程序URL”,true) ;

 // 第二：初始化HTTP请求参数（调用open方法）
        xmlHttp.open("get", "demo.do", true);

4、发送请求（调用send方法）

xmlHttp.send([数据]) ;

如果是post请求，且通过send(数据)这种方法传递数据，则需要在send之前，设置请求头xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

如果是get请求，可以通过url重写的方式传递数据，格式如下：
url?参数名1=值1&参数名2=值2...&参数名n=值n

 // 第三：发送请求（调用send方法）
        xmlHttp.send(); //send([date])：可以传数据过去

5、定义函数，监听 onreadystatechange 事件

6、判断是否完成响应以及正确无误的响应

7、获取服务器响应的数据(responseText)

8、DOM操作，把数据回显到页面某个节点中

 // 第五：定义函数，监听 onreadystatechange 事件
        xmlHttp.onreadystatechange = function () {
   

            // 第六：判断是否完成响应以及正确无误的响应
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
   
                // 第六：获取服务器响应的数据
                // 你向ajax后台的程序发送XmlHttp请求的时候, 后台程序接到请求会进行处理,
                // 处理结束后,可以返回一串数据给前台,这个就是responseText.
				
                // 第七、获取服务器响应的数据(responseText)
                let text = xmlHttp.responseText;
                // console.log(text) ;
                // 第八、DOM操作，把数据回显到页面某个节点中
                document.getElementById("data").innerText = text;
            }
        }

2、使用Ajax异步请求

异步请求的方式有三种： $. g e t （）、$ .post（）、$.ajax（）

$.get（）：

语法：jQuery.get(url, [data], [callback], [type])

 function lx1() {
     
        // $.get('lx01.do', {type:'2'} ,function(data) {
     

     	// data：在这里是代表从servlet里面的out.print(data)的传过来的值
        $.get('lx01.do', 'type=2' ,function(data) {
     
            $("#str").html(data) ;
        }, 'text') // ‘ text ’：要是不写的话，默认是这个值
    }

$.post（）：

语法：jQuery.post(url, [data], [callback], [type]

 function lx2() {
     
     
    	// stu：这个可能在Servlet里面输出的是对象，所以它可以stu.字段
        $.post('lx02.do', function( stu ){
     
            $("#xm").html(stu.name) ;
            $("#sr").html(stu.birth) ;
            $("#xb").html(stu.sex) ;
        }, 'json')
    }

$.ajax（）：

语法：jQuery.ajax(url,[settings])

$.ajax('lx03.do',{
                 
    type:'post' , // 这个不写默认是get请求            
    dataType:'text',            
    // data:{uname:$("#uname").val(),upass:$("#upass").val()},           
    // data:'uname=' + $("#uname").val() + '&upass=' + $("#upass").val(),            
    data:$("#frm").serialize(), 
    //获取表单中所有带name属性的值，这个是传去Servlet的值            
    success:function( data ){
      // 这个是在Servlet里面输出的值                
 	   console.log(data.length);                // $("#jg").text( data ) ;                
 	   if($.trim(data) === '登录成功') {
                         
 	   console.log("OK?");                   
 	   location.href = "http://www.baidu.com" ;                
    }           
},           
    error:function(){
                     
    	$("#jg").html("服务器异常，请联系管理员：110!") ;            
    }       
}) ;

第三、Json

1、概念

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言
JSON 具有自我描述性，更易理解
JSON 是存储和交换文本信息的语法。类似 XML，但JSON 比 XML 更小、更快，更易解析。

2、json与xml对比

json比较与xml的优势如下：

没有结束标签,长度更短,读写更快
能够使用内建的 JavaScript eval() 方法进行解析
可以使用数组，不使用保留字

♥ json：

{
   	
	"name":"兮动人",	
	"age":22,	
	"fruits":["apple","pear","grape"]
}

♥ xml：

<root>	
	<name>兮动人</name>	
	<age>22</age>	
	<fruits>apple</fruits>	
	<fruits>pear</fruits>	
	<fruits>grape</fruits>
</root>

3、json的语法：

数组（Array）用方括号(“[]”)表示。
对象（0bject）用大括号(“{}”)表示。
名称/值对(name/value）组合成数组和对象。
名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
并列的数据之间用逗号(“,”）分隔

4、json的值

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号里面）
对象（在花括号里面）
null

5、json文件

JSON 文件的文件类型是 “.json”
JSON 文本的 MIME 类型是 “application/json”

6、转换

eval（）：这个函数的参数是一个字符串，其作用是直接执行其中的JavaScript代码
- eval()解析字符串
```
<script>	
    var str = "console.log('hello')";	
    eval(str); // 结果是在控制台里面输出hello
</script>
```
- eval()解析JSON字符串
```
<script>	
    var str = '{"name":"兮动人","age":22}';	
    var obj = eval("("+str+")");	
    console.log(obj); // 结果是{name:"兮动人",age:22}
</script>
```
- 但是,现在已经很少直接使用eval()来解析了，如果您的浏览器版本真的是很旧，可能才需要这个方法。此外，eval()是一个相对危险的函数，因为字符串中可能含有未知因素。在这里，作为学习，还是要知道这也是一种方法。
- 请注意 eval()的参数，在字符串两旁加了括号，这是必须的，否则会报错。
- 因为JSON字符串是被大括号（“{}”）包围的，直接放到 eval()会被当成语句块来执行，因此要在两旁加上括号，使其变成表达式。
2、 JSON. parse()
- 现在绝大数的浏览器都支持 JSON. parse() 的方法，这是一个值得使用的一种方法
- 如果输入了不规范的字符串，会报错的
  ▽ JSON字符串转换为JS对象
```
<script>	
      var str = '{"name":"兮动人","age":22}';	
      var obj &
```

最低0.47元/天解锁文章

成就如何？

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
“阿贾克斯”基础

Ajax一、AJAX简介异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。它是一系列交互式网页应用技术的结合体，包含知识有： 1）基于XHTML和CSS标准的表示； 2）使用Document Object Model（DOM）进行动态显示和交互； 3）使用XMLHttpRequest与服务器进行异步通信； 4）使用JavaScript绑定一切AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX
复制链接

扫一扫