zoukankan      html  css  js  c++  java
  • 【JS-Ajax相关知识(二)】

    GET请求和POST请求的选择情况:
    1、如果请求的数据量特别大或者需要有上传功能的话,必须使用POST请求。
    2、GET请求相对于POST请求来说,安全性略差,如果要请求的数据具有严重的
    隐私性的话,建议使用POST请求。
    3、如果仅仅是数据查询的操作,建议使用GET请求。
    4、如果是其他操作,建议使用POST请求。

    【同步和异步】
    同步:相当于请求一次过后,要等到这次请求的响应后,才能继续下一次请求。
    异步:请求一次后,不需要等到这次请求的响应后,就可以进行其他请求。

    【Ajax】
    Ajax异步的javascript和XML,也就是说,Ajax就是通过javascript语言,去异步
    请求之后,得到响应,局部刷新代码。
    两个特点:异步请求、局部刷新。

    【Ajax的原生开发流程】
    1、创建请求对象(异步)
    创建核心的XMLHttpRequest请求对象,Ajax编程都是通过这个对象来进行的。
    注意:浏览器对XMLHttpRequest对象的支持有所不同。
    1)大部分主流浏览器都支持XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    2) IE6
    var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    3) IE6以下
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

    2、打开与服务器的链接
    创建完请求对象后,通过请求对象的open()方法,这个方法可以与服务器
    建立链接。
    open(method, url, flag);
    三个参数:
    1、表示用什么请求方式。GET 、POST等。
    2、要请求服务器的路径,如果你用的是GET请求,有参数的话,要拼接在URL
    后面。
    3、表示是否是异步请求,默认是异步的。

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://10.xxx.xxx.xxx:8080/?name=liu&pwd=123", true);

    3、发送请求
    与服务器建立链接后,在利用请求对象的send()方法去发送请求。
    如果用的是GET请求,send方法内的参数写null就行,如果是post请求,请求有参数
    的话,那么请求参数要写在这个send方法内。

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://10.xx.xx.xx:8080/", true);
    xhr.send(null);

    //注意:如果是POST请求,那么在调用send方法之前,要设置请求头。
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    4、接收服务器响应
    当请求对象调用完send方法后,就可以等待服务器的响应,请求对象会根据
    响应的不同状态而触发onreadystatechange事件。

    【请求对象的几种状态码:】
    0:未初始化完成,只是创建了XMLHttpRequest对象,还未调用open方法
    1:初始化完成,请求开始,开始调用open方法,但没调用send方法
    2:请求发送,就是说已经调用了send方法
    3:开始接收服务器的响应。
    4:读取接收服务器响应后返回的数据。(响应彻底结束)

    当状态吗为2、3、4的时候,会触发onreadystatechange事件
    可以利用请求对象的readyState属性来查看当前的状态吗。
    真正开发的时候,我们只关心状态吗为4的时候。

    【服务器响应的状态吗】
    200:响应正常(这就是我们最后想要的状态吗)
    404:找不到要访问的URL
    500:服务器方面的错误。

    我们可以利用请求对象的status属性来查看服务器状态吗。

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "xxx.html", true);
    xhr.send(null);
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
    //返回的json字符串
    xhr.responseText;
    }
    }

  • 相关阅读:
    既然来了,就要在这扎根
    vuejs 组件 移动端push 没有渲染页面
    cucumber——BDD的一个自动化测试的副产品
    Spock框架——单元测试框架
    Mockito——用于 Java 开发的模拟测试框架
    TestNG——开源自动化测试框架
    selenium/appium/airtest——UI测试工具
    rest-assured 使用指南——接口测试
    JUnit 4.1——單元測試框架
    二、面向對象(补充)
  • 原文地址:https://www.cnblogs.com/lizeren/p/8378733.html
Copyright © 2011-2022 走看看