AJAX 的简单实例（JS实现和JQuery 实现）

秒速五厘米 2022-07-19 05:08 156阅读 0赞

*   *  什么是AJAX
     *  原生JS实现AJAX
        
         *   *  HTML5 xmlhttprequest2
     *  JQuery实现
     *  跨域问题
     *  parseJSON

## 什么是AJAX ##

Asynchronous Javascript And XML”（异步JavaScript和XML）

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

## 原生JS实现AJAX ##

function ajax() { 
    
                //先声明一个异步请求对象
                var xmlHttpReg = null;
                if (window.ActiveXObject) {
       //如果是IE
    
                    xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
    
                } else if (window.XMLHttpRequest) {
    
                    xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
                }
    
                //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
                if (xmlHttpReg != null) {
                    xmlHttpReg.open("get", "text.json", true);
                    xmlHttpReg.send(null);
                    xmlHttpReg.onreadystatechange = function () { 
                        if (xmlHttpReg.readyState == 4) {
       //4代表执行完成
    
                            if (xmlHttpReg.status == 200) {
       //200代表执行成功
                                //将xmlHttpReg.responseText的值赋给ID为resTextdocument.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                                alert();
                            }
                        }
                    }; //设置回调函数
    
                }
    
                //回调函数
                //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应
    
                //设定函数doResult()
                function doResult() { 
    
                    if (xmlHttpReg.readyState == 4) {
       //4代表执行完成
    
                        if (xmlHttpReg.status == 200) {
       //200代表执行成功
                            //将xmlHttpReg.responseText的值赋给ID为resTextdocument.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                            alert();
                        }
                    }
                }
            }
        }

#### HTML5 xmlhttprequest2 ####

*  可以设置HTTP请求的时限。
 *  可以使用FormData对象管理表单数据。
 *  可以上传文件。
 *  可以请求不同域名下的数据（跨域请求）。
 *  可以获取服务器端的二进制数据。
 *  可以获得数据传输的进度信息。

var xmlHttpRequest=new XMLHttpRequest();
        xmlHttpRequest.open('post',url,true);
        xmlHttpRequest.responseType="text";
        xmlHttpRequest.send("te111");
        xmlHttpRequest.onload=function () { 
            if(this.status==200){
                alert(this.responseText);
            }
        }

## JQuery实现 ##

1导入JQuery库  
`<script src="js/jquery.js"></script>`  
2

function getDataFormServer() { 
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1/0809/text.json",
                dataType: "text",
                success: function (data, textStatus) { 
                    alert("success");
                    $("#myDiv").html(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { 
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
                ,complete: function (jqXHR, status, responseText) { 
                    alert("请求完成")
                }
    // });
    
            }

## 跨域问题 ##

一般情况下 ajax是不能跨域请求的，  
所谓的不能跨域请求就是自己的主机不能去请求别的主机内容的。  
所以这里的例子都是 在自己的服务器上运行的。

## $.parseJSON ##

将得到的JSon转换成对象。

success: function (data) { 
                    var data = $.parseJSON(data);}

解析动态的添加到 html文档中

str = "<p>" + data.pName + "</p></div>";
                        $("#infos").append(str);

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery+ajax实现简单的上传图片功能

在前面的文章里面有写到，用vue上传图片的功能，vue-element-admin上传图片的功能：https://www.jianshu.com/p/383e1f2f4276，

Bertha 。/ 2022年11月22日 05:11/ 0 赞/ 189 阅读

相关 AJAX 的简单实例（JS实现和JQuery 实现）

什么是AJAX 原生JS实现AJAX HTML5 xmlhttprequest2 JQue

秒速五厘米/ 2022年07月19日 05:08/ 0 赞/ 157 阅读

相关 jQuery实现AJAX定时刷新局部页面实例

本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实

向右看齐/ 2022年06月14日 06:09/ 0 赞/ 337 阅读

相关 js+jQuery+ajax，处理数据和功能的实现

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta

红太狼/ 2022年06月04日 10:26/ 0 赞/ 166 阅读

相关 AJAX -- jQuery实现

$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(re

怼烎@/ 2022年06月02日 04:40/ 0 赞/ 149 阅读

相关 JavaScript和JQuery分别实现Ajax

index010\_js & index010\_jquery的body代码中都写入： <form action="validate" method="post">

超、凢脫俗/ 2022年05月19日 05:26/ 0 赞/ 171 阅读

相关 js_ajax_简单实现ajax

@WebServlet("/ajax.do") public class HelloAjax extends HttpServlet { privat

川长思鸟来/ 2022年05月18日 20:43/ 0 赞/ 174 阅读

相关 jQuery ajax 简单的实例

通过jQuery ajax实现从服务器查询数据，返回给前端并显示到html页面 html文件 <!DOCTYPE html> <html lang="zh-

红太狼/ 2022年05月09日 10:33/ 0 赞/ 173 阅读

相关 ajax和json简单实例html，js

ajax和json简单实例知道小谷的都知道，我是一个不喜欢复习的人，然后上课讲的ajax至今都回避，今天终于还是被迫学习了。活不多说，我们直接上代码，希望对和我一

男娘i/ 2022年03月14日 11:46/ 0 赞/ 202 阅读

相关 jsp+ajax+jquery简单实例

前端 <input type="text" name="username" id="username" onblur="checkUsername()" > aja

￡神魔★判官ぃ/ 2022年02月27日 01:08/ 0 赞/ 214 阅读