AJAX

大麻花CEO
72 阅读3分钟

AJAX简介

一.什么是AJAX?

  1. -- ajax全名 async javascript and xml (异步js和xml)
  2. -- 是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
  3. -- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
  4. -- AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
  5. -- 是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

二.AJAX的特点

AJAX的优点:

  • 可以无需刷新页面与服务器端进行通信
  • 允许你根据用户事件来更新部分页面内容

AJAX的缺点:

  • 没有浏览历史,不能回退
  • 存在跨域问题
  • SEO不友好

AJAX的使用

创建XMLHttpRequst对象

  • XMLHttpRequst对象是AJAX的基础
  • 所有浏览器均兼容支持XMLHttpRequst对象
  • XMLHttpRequst用于在后台与服务器交换数据

创建XMLHttpRequst的语法:

var xml = new XMLHttpRequst();

老版本创建方式:

var xml = new ActiveObject("Microsoft.XMLHTTP");

浏览器兼容判断

var xml;

if(window.XMLHttpRequst){
    xml = new XMLHttpRequst();
}else{
    xml = new ActiveObject("Microsoft.XMLHTTP");
}

XMLHttpRequst请求

------将请求发送到服务器,我们需要使用XMLHttpRequst对象的open()和send()------

规定请求的类型、URL 以及是否异步处理请求。

1.open(merhod,url,asyns)

  • merhod:请求类型
  • url:服务器位置
  • asyns:true(异步)false(同步) 将请求发送到服务器。

2.send()用get格式的请求

3.send(String)用post请求

4.setRequestHeader(header,value)

  • header:规定头部名称
  • value:规定头部值

GET请求

var xml = new XMLHttpRequest();
//案例1:普通GET请求
xml.open("GET","服务器地址",true);
xml.send();
//案例2:在案例1的时候可能产生缓存得到过的结果,所以URL需要添加应该唯一的ID
xml.open("GET","服务器地址"+Math.random(),true);
xml.send()
//案例3:也可以通过GET发送消息,需要在URL添加信息
xml.open("GET","服务器地址?name=admin&pwd=admin",true);
xml.send();

POST请求

//案例1:普通的POST请求
xml.open("POST","服务器地址",true);
xml.send();
//案例2.复杂POST请求
xml.open("POST","服务器地址",true);
xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
xml.send("name=admin&pwd=admin");

如果想要HTML表单那样POST数据,请通过setRequestHeader(header,value) 1.setRequestHeader(header,value)

  • header:规定头部名称
  • value:规定头部值 2.onreadystatechange属性:可以定义当请求接收到应答时所执行的函数;

3.readyState属性:保存了XMLHttpRequest的状态

  • ##0:请求未初始化
  • ##1:服务器连接已建立
  • ##2:请求已接收
  • ##3:正在处理请求
  • ##4:请求已完成且响应已就绪 4.statusTest属性:返回状态文本

5.responseXML属性:用来解析XML对象的,获取XML形式的响应

6.responseText属性:获取字符串形式的响应

每当 readyState 发生变化时就会调用 onreadystatechange 函数。当 readyState 为 4，status 为 200 时，响应就绪：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="data">
    <button >点击</button>
</form>
<script type="text/javascript">
    var xml = new XMLHttpRequest();
    xml.open("GET","data");
    xml.send();
    xml.onreadystatechange = function(){
        if(xml.readyState == 4 && xml.status == 200){
            alert("处理完成!!!"+xml.responseText);
        }
    }
</script>
</body>
</html>

JAVA

package cn.cude;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/data")
public class MyGet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charaset=utf-8");
        resp.getWriter().write("xxxxxx");
    }
}

GET案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="app" value="点击">点击</button>
<div id="ass"></div>
<script type="text/javascript">
    var app = document.getElementById("app");
    var ass = document.getElementById("ass");
    app.addEventListener("click",function (){
        //1,获取XMLHttpRequest对象
        var xml = new XMLHttpRequest();
        //2.向数据库发送信息
        // data 指路径
        xml.open("GET","data",true);
        xml.send();
        //3.当接收到响应时,执行函数
        xml.onreadystatechange = function(){
            //4.判断返回的状态
            if(xml.readyState == 4 && xml.status == 200){
                ass.innerText = xml.responseText;
            }
        }
    });
</script>
</body>
</html>

package cn.cude;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/data")
public class MyGet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charaset=utf-8");
        resp.getWriter().write("xxxxxx");
    }
}

POST案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="app" value="点击">点击</button>
<div id="ass"></div>
<script type="text/javascript">
    var app = document.getElementById("app");
    var ass = document.getElementById("ass");
    app.addEventListener("click",function (){
        //1,获取XMLHttpRequest对象
        var xml = new XMLHttpRequest();
        //2.向数据库发送信息
        // data 指路径

        xml.open("POST","data",true);
        //--如果想要HTML表单那样POST数据,请通过setRequestHeader(header,value)
        xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xml.send("name=sss&age=aaa");
        //3.当接收到响应时,执行函数
        xml.onreadystatechange = function(){
            //4.判断返回的状态
            if(xml.readyState == 4 && xml.status == 200){
                ass.innerText = xml.responseText;
            }
        }
    });
</script>
</body>
</html>

package cn.cude;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/data")
public class MyGet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charaset=utf-8");
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(name);
        System.out.println(age);
        resp.getWriter().write("xxxxxx");
    }
}
avatar
文章
阅读
粉丝