正确而又严谨得ajax原生创建方式

自己去封装一个xhr对象是一件比较麻烦的事情。其实也不麻烦,注意逻辑和一个ie6兼容方案(可无),和一个304 其他2开头的status都可以就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
<script>
document.onclick = function (){
    var xhr = null ;
    if(window.ActiveXObject){
        xhr = new ActiveXObject() ;
    }else if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status<300){
                console.log(1)
                control(xhr.responseText)
            }
        }else if(xhr.status == 304){
            control(xhr.responseText)
        }else{       console.log("404 not found")     }
    }

    function control(data){
        console.log(data)
    }
    xhr.open("get","test.php",true);
    xhr.send(null)
}
</script>
</html>

呐 。。 这段代码没什么可以看的

知识点:

  1 . 兼容ie6 7 的window.ActiveXObject ;

  2 . 熟悉整个流程 创建xhr => xhr.onreadystatechange => xhr.readystate => xhr.status =>callback   创建好xhr和监听过程 然后open("get","url",true) 然后send(data)

   3 . 切记 1 . status不是必须200,只要2开头的都可以  2 . status 304是一个好的征兆,304表示请求资源没有修改, 可以直接使用浏览器缓存.如果一个网站被搜索引擎抓取的次数以及频率越多那么他是越有利于排名的,但是如果你的网站出现太多的304,那么一定会降低搜索引擎的抓取频率以及次数,从而让自己的网站排名比别人落一步

  

时间: 2025-01-12 12:51:53

正确而又严谨得ajax原生创建方式的相关文章

Ajax原生请求和java对象转成json

\黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模拟 jquery里面的对Ajax的简化封装: json2.jsp  Ajax原生请求 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@

什么是Ajax与Ajax原生的实现方式

一.什么是Ajax? Aiax:异步的Javascript和XML. 作用:用于完成局部刷新 XML是用于数据传输,现在开始被JSON所替代. 1.1.交互方式问题 传统的交互方式每次都必须返回整个页面,宽带,响应速度都有影响的, Ajax的交互方式是从 客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,不使用浏览器发送请求,而是使用JavaScript中的XMLHttpRequest(及Ajax对象)对象发送请求到服务器,服务器接收请求并处理完毕后只返回页面需要的内容,XMLH

2019年6月14日 Web框架之Django_07 进阶操作(MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器)

摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller 模型-视图-控制器)是一种Web架构的模式,所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据库的对象(ORM),视图负责与用户的交互(页面),控制器(C)接受用户的输入调用模型和视图完成用户的请求. M

Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, Ajax结合sweetalert实现删除二次确认, 批量插入数据, 自定义分页器, ajax结合sweetalert实现删除二次确认

多对多三种创建方式 1.全自动(较为常用) class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处:第三张表自己创建 不足之处:第三张表无法扩展额外

AJAX原生JavaScript写法

GET方式 1 //创建XMLHttpRequest对象,为考虑兼容性问题,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象 2 var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 3 4 //设定请求的类型,服务器URL,以及是否异步处理 5 ajax.open("get",&

HTML5+AJAX原生分块上传文件的关键参数设置

processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务端后会变成d[]=1&d[]=2的形式. 要将其设置为false后,才能上传ArrayBuffer对象,服务端直接从Request.InputStream获取原始字节流. w3school解释: processData 类型:Boolean 默认值: true.默认情况下,通过data选项传递进来的数

SQL学习笔记——临时表不同创建方式的区别

问题:在存储过程中使用临时表时,不Create临时表就会报错. 分析了下,总结了临时表创建方式的区别. 创建临时表有两种方法: 方法一 create  table  #临时表名 ( 字段1 约束条件,      字段2 约束条件,      -- ) create  table  ##临时表名 ( 字段1 约束条件,      字段2 约束条件,      -- ) 方法二 select  *  into  #临时表名  from 你的表;   select  *  into  ##临时表名  

Python Django 多对多三种创建方式 form组件 cookie和session

一 表中多对多关系三种创建方式 以Book表和Author表多对多关系例 1.第一种方式:全自动(推荐使用):models.ManyToManyField(to='类名') 优点:不需要你手动创建第三张表 缺点:第三张表不是你手动创建的,字段是固定的无法拓展 class Book(models.Model): title = models.CharField(max_length=32) price = models.DecimalField(max_digits=8,decimal_place

多对多三种创建方式、forms组件、cookies与session

多对多三种创建方式.forms组件.cookies与session 一.多对多三种创建方式 1.全自动 # 优势:不需要你手动创建第三张表 # 不足:由于第三张表不是你手动创建的,也就意味着第三张表字段是固定的无法做扩展 class Book(models.Model): title = models.CharField(max_length=32) price = models.DecimalField(max_digits=8,decimal_places=2) authors = mode