原生ajax代码

原生AJAX代码

2016-11-21 18:36:20

原声AJAX代码，

<html>

<head>

<script>

var xmlhttp;

function getNewXmlRequest(){
//接收的数据，从服务器返回，如果返回对象在window成立
if (window.XMLHttpRequest){
//返回给对象赋值，IE7以上和主流浏览器使用
xmlhttp=new XMLHttpRequest();
//如果在服务器返回的数据不成立，
}else{// code for IE6, IE5
//给对象赋值为下，在IE7一下浏览器和普通无内核浏览器中使用
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

}

function cha(){
var a = document.getElementById("sql").value;

if(a.length==0){
return false;
}
//根据浏览器生成的对象
getNewXmlRequest();

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//获得某个标签的ID，让此标签的的innerhtml属性，赋值为后面得到的服务器返回结果，结果是声明的变量与后台交互得到的数据：xmlhttp.responseText
//重要语句，必须的，没有这个语句，结果就无法响应
document.getElementById("add_li").innerHTML=xmlhttp.responseText;
}
<!--document.getElementById("add_li").appendChild.innerHTML=xmlhttp.responseText;-->
}
//指定异步地址，提交方式，和传递的参数，
xmlhttp.open("GET","addli.php?db="+a,true);
//发送异步请求
xmlhttp.send();

}

</script>

</head>

<body>

<input type="text" id="sql" οnkeyup="cha()" />

<ul id="add_li">
<li>查询结果</li>

</ul>

</body>

</html>

收起

展开全文

原生ajax代码

千次阅读 2018-10-13 18:01:05

<!DOCTYPE html> <html> <head> <meta charset="utf-8"...//1、创建ajax对象 var xmlhttp; if (window.XMLHttpRequest) { // IE7+...

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc()

{

//1、创建ajax对象

    var xmlhttp;

    if (window.XMLHttpRequest)

    {

        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

        xmlhttp=new XMLHttpRequest();

    }

    else

    {

        // IE6, IE5 浏览器执行代码

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

//2、监听状态的变化

    xmlhttp.onreadystatechange=function()

    {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

        }

    }

//3、打开连接

    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//true代表支持异步执行，false为否

//4、发送请求

    xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" οnclick="loadXMLDoc()">修改内容</button>

</body>

</html>

收起

展开全文

手写原生AJAX代码

2020-10-15 11:23:57

一步到位·手写原生AJAXAJAX 简史AJAX的定义AJAX使用的技术AJAX工作原理AJAX技术实现XMLHttpRequest的常用属性（具体就参考红宝书把）XMLHttpRequest的常用方法编写AJAX代码 手写AJAX的代码，我们也需要知道，到底...


一步到位·手写原生AJAX
AJAX 简史
AJAX的定义
AJAX使用的技术
AJAX工作原理
AJAX技术实现
XMLHttpRequest的常用属性（具体就参考红宝书把）
XMLHttpRequest的常用方法
编写AJAX代码


手写AJAX的代码，我们也需要知道，到底什么是AJAX，以及为什么可以实现数据的通信，是基于哪些原理？
AJAX 简史
AJAX的定义

AJAX的全称就是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX就是与服务器进行数据通信并且在不刷新网页的前提下更新渲染数据，这就是异步体现

AJAX使用的技术

使用CSS和HTML所表示（毕竟是展示在网页端）
使用DOM模型进行数据交互和展示
使用XMLHttpRequest来和服务器进行异步通信
使用JavaScript实现方法的绑定以及实现



AJAX 的核心是 XMLHttpRequest 对象。


不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。


IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
AJAX工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
AJAX技术实现
XMLHttpRequest的常用属性（具体就参考红宝书把）

onreadystatechange 属性

onreadystatechange属性也就是一个事件响应了，从字面上也可以看出，是处理服务器相应的事件，所以里面存有处理服务器响应的函数。


xmlHttp.onreadystatechange = function() {
    //我们需要在这写一些代码
}


readyState 属性

readyState存有服务器的响应状态，每当readyState发生改变的时候，onreadystatechange函数就会被执行，状态码以及描述如下：

0	请求未初始化（在调用 open() 之前）

1	请求已提出（调用 send() 之前）

2	请求已发送（这里通常可以从响应得到内容头部）

3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）

4	请求已完成（可以访问服务器响应并使用它）
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据,具体操作在这里
    }
}


responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

其他属性及描述见下表


XMLHttpRequest的常用方法

open()方法

open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

这里【true】表示需要进行异步处理
send()方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

也就是说，open()方法是对服务端，而send()是对客户端。其他方法如下图



编写AJAX代码
大体的步骤就是以下四点，万变不离其宗，只是内部的逻辑会根据业务需求而变化
1. 创建XMLHttpRequest对象。
2. 设置请求方式。
3. 调用回调函数。
4. 发送请求。


创建对象

var xmlHttp=new XMLHttpRequest();

但是如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

所以最后也是最好的写法就是：

var xmlHttp;
if (window.XMLHttpRequest) {            //非IE
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {       //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}


设置请求方式

如何设置请求方式呢？open()就可以用来设置请求方式。

xmlHttp.open("POST", url, true);
调用回调函数

如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
}

xmlHttp.readyState是存有XMLHttpRequest 的状态,xmlHttp.status是服务器返回的结果

AJAX状态值与状态码区别

AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）
AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成，详细查看RFC）

这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。


发送请求

var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增加time随机参数，防止读取缓存 				
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");                     // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。

收起

展开全文

js原生Ajax代码

2020-02-26 14:26:29

var Ajax = { get: function(url,fn){ // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr=new XMLHttpRequest(); xhr.open('GET',url,false); xhr.onreadystatechange=function(){ ...

var Ajax = {
    get: function(url,fn){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,fn){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

收起

展开全文

ajax简介+原生ajax代码
2019-09-22 18:16:17
Ajax(Asynchronous Javascript And XML)，翻译过来就是异步Javascript和XML；是一种在网页上与服务器进行交互的技术。它异步交互的特性，能够在不刷新页面的情况下,对服务器发出请求并获取数据，再利用js处理数据，...
收起
原生ajax代码笔记
2016-07-26 21:05:00
这个练习就是用原生的ajax获取本地服务器的一个简单的php的返回信息，将返回信息装上id为mydiv的元素上面。 js代码如下： //XHR构造函数 function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ ...
收起
原生Ajax代码实现
2019-10-07 07:36:01
Ajax Asynchronous JavaScript And XML 异步：指一段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反的则为同步，自己理解的就是类似百度的搜索框输入内容时的...
收起
Javascript原生ajax请求代码实例
2020-10-15 15:39:31
主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收起
原生ajax
2019-06-05 10:00:37
原生ajax代码 function(url, data, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr= null; if(window.XMLHttpRequest){ xhr= new XMLHttpRequest(); }else{ xhr= new ...
收起
JS原生Ajax和jQuery的Ajax与代码示例
万次阅读 多人点赞 2018-08-26 20:38:57
JS原生Ajax和jQuery的Ajax 【学习目标】 1，了解JS原生Ajax原理 2，掌握json数据格式掌握json数据格式方式掌握json的解析方式 3，掌握jQuery中的Ajax封装 4,使用Ajax实现特效实现异步验证用户名是否存在 ...
收起
Ajax jQuery
js原生ajax请求代码示例
2017-12-30 14:04:43
一、前端html页面编写 ajax的测试 ...二、原生ajax的js写法 var xmlHttp; window.onload = function() { // 监听用户名失去焦点事件 var usernameEle = document.getElementById("username");
收起
原生ajax实现代码
2014-10-09 21:20:00
//开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) { //Mozilla 浏览器 ajax = new XMLHttpRequest(); if (ajax.overrideMimeType) { //设置MiME类别 ...
收起
JS原生Ajax和jQuery的Ajax与代码示例-ok
2019-10-26 14:02:16
JS原生Ajax和jQuery的Ajax与代码示例 2018-08-26 20:38:57苏凯勇往直前阅读数 17250更多 JS原生Ajax和jQuery的Ajax 【学习目标】 1，了解JS原生Ajax原理 2，掌握json数据格式掌握json数据格式方式掌握json...
收起
原生ajax处理json格式数据的实例代码
2020-11-28 04:09:13
原生ajax处理json格式数据代码实例: 由于jQuery的出现，原生ajax使用频率也越来越少，这当然是因为jQuery的便利性多导致的。但是对于原生ajax实现原理的知晓也是非常重要的，下面就改造本板块的一个使用jquery ajax...
收起
原生ajax使用
2018-11-29 10:30:50
本代码是原生ajax使用demo，详情请查看博客 原生Ajax使用笔记
收起
AJAX原生代码
2017-10-18 19:01:55
1.使用原生的AJAX //onblur="userValidate(this)"关联一个事件 ...2.编写AJAX原生代码 var xhr //1.创建XMLHttpRequest对象的函数 function getXMLHttpRequest(){ if(window.XMLHttpRequest){ return new
收起
原生Ajax的代码实现及状态码总结
千次阅读 2017-03-05 17:28:42
一，原生Ajax的代码实现： 1：主要分四个步骤： 1) 定义XMLHttpRequest对象 2) 与服务器建立连接 4) 接受来自服务器的信息并处理 2：代码： 3) 发送请求 ajax...
收起
javascript 状态码
实现原生Ajax的过程和代码
2019-10-26 11:31:22
本博文就原生Ajax进行解析和代码展示， 2 Ajax 创建XMLHttpRequest对象；注意兼容注册回调函数，在XMLHttpRequest中设置要发送的请求，利用的是open（first,second,third）方法 1）param first：...
收起
原生Ajax异步向后端发http请求（post,get方法区别）——原生JS代码示例
2019-04-10 17:59:49
GitHub源码下载地址：... 前端原生ajax发请求的代码，通过xmlhttp的方法操作，重点全在代码注释里。有post和get两种方法， <script> setTimeout('CommentAll()', 5000); var xmlHttp =...
收起
javascript

原生AJAX代码

原生ajax代码

手写原生AJAX代码

一步到位·手写原生AJAX

AJAX 简史

AJAX的定义

AJAX使用的技术

AJAX工作原理

AJAX技术实现

XMLHttpRequest的常用属性（具体就参考红宝书把）

XMLHttpRequest的常用方法

编写AJAX代码

js原生Ajax代码

ajax简介+原生ajax代码

原生ajax代码笔记

原生Ajax代码实现

Javascript原生ajax请求代码实例

原生ajax

JS原生Ajax和jQuery的Ajax与代码示例

js原生ajax请求代码示例

原生ajax实现代码

JS原生Ajax和jQuery的Ajax与代码示例-ok

原生ajax处理json格式数据的实例代码

原生ajax使用

AJAX原生代码

原生Ajax的代码实现及状态码总结

实现原生Ajax的过程和代码

原生Ajax异步向后端发http请求（post,get方法区别）——原生JS代码示例

原生ajax代码

ES索引的基础操作.postman_collection.json

JMETER 性能测试基础课程

Advanced_BPF_Kernel_Features_for_the_Container_Age_FOSDEM.pdf

我国早在2014年就开始推进数字货币并成立了数字货币研究小组

MySQL 高可用工具 heartbeat 实战部署详解

libFuzzer视频教程

MySQL Router 实现高可用、负载均衡、读写分离

05. windows下使用U盘工具把多个分区合并为一个分区

NLP期刊

settings.zip

FastDFS 分布式文件系统部署

2020天猫国货食品趋势洞察报告.pdf

Odoo search 搜索视图详解与搜索视图工作原理

羽量级在线 HTML 编辑器

MySQL你该了解的那些事【服务端篇】

C++对象模型.zip

2021年A特种设备相关管理（电梯）模拟试题及A特种设备相关管理（电梯）模拟考试题库

mysql 按月份统计

chrome for ubuntu

jlink-v8 固件.zip