Java基础-AJAX - JAVA学习网

Ajax概述
- 概念：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- 优点：AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
1. 什么是同步，什么是异步：
  同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。
  
  异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
2. Ajax的运行原理：页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
JS原生的AJAX
- js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤:
1. 1. 创建AJAX对象。
  2. 为AJAX引擎对象绑定监听。
  3. 绑定提交地址。
  4. 发送请求。
  5. 接收响应数据。

function fun1(){
        //1.创建ajax引擎对象--所有操作都是通过引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2.绑定监听--监听服务器是否返回
        xmlHttp.onreadystatechange = function(){
            //5.接收响应数据
            if(xmlHttp.readyState == 4&&xmlHttp.status==200){
                var res = xmlHttp.responseText;
                document.getElementByID("span1").innerHTML = res;
            }
        }
        //3.绑定地址
        xmlHttp.open("GET","/WEB1027/AjaxServlet",true);
        //4.发送请求
        xmlHttp.send();
    }

　　　　注意：如果是post提交，在发送请求之前设置一个头。

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

　　　　备注：所有异步访问都是AJAX引擎。

Jquery的Ajax技术（重点）
- jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种：
  1. $.ajax([options]);
  2. load(url,[data],[callback]);
  3. $get(url,[data],[fn],[type]);
  4. $getJSON(url,[data],[fn]);
  5. $.getScript(url,[callback]);
  6. $.post(url,[data],[fn],[type]);
- 其中最常用的有三种：
1. 1. $.get(url,[data],[calback],[type]);
  2. $.post(url,[data],[callback],[type]);
    其中：url代表请求的服务器端地址
    
    　　　data代表请求服务端的数据（可以是json格式也可以是key=value）
    
    　　　callback代表服务器端成功响应触发的函数
    
    　　　type代表服务器端返回的数据类型（text，json,html等）
  3. $.ajax({option1:value1,option2:value2...});
    常用的option有如下：
    
    async：是否异步，默认是true代表异步
    
    data：发送到服务器的参数，建议使用json格式
    
    dataType：服务器端返回的数据类型，常用text和json
    
    success：成功响应执行的函数，对应的类型是function类型
    
    type：请求方式，POST/GET
    
    url：请求服务器端地址

JAVA学习网

分类