zoukankan      html  css  js  c++  java
  • ajax

    ajax:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术

    同步:阻塞模式,在主线程排队执行的任务,只有前一个任务执行完,后一个任务才能执行。

    异步:非阻塞模式,不进入主线程,而是进入任务队列,只有等主线程上面的任务执行完毕,任务队列通知主线程,请求执行任务。该任务才会进入主线程执行。(定时器,ajax,回调函数,事件处理函数)

    容错处理

    try{
    如果代码块里面的代码有错误,执行catch里面的代码,如果try里面没有错误,不走catch
    }catch(e){
    如果try里面的代码有错误,执行catch里面的代码
    e:try里面的错误信息
    }finally{
    不管上面那块代码有错误,我这里代码一定会执行。 finally可以省略
    }

    创建ajax对象

    let xhr = new XMLHttpRequest()

    xhr.open(请求的方式,接口地址,是否异步)

    参1:请求的方式 -- get/post/put/delete 最常用的方式get/post

    参2:接口地址 -- 后端或者第三方提供的域名,域名里面包含我们需要的数据

    参3:是否异步,true异步(最常用的是异步),false同步,同步下浏览器出现警告。

    xhr对象下面send()方法,不涉及数据的传输,里面没有参数的 --- 发送解析

    解析过程有5步:就绪状态码(数字)决定---xhr.readyState:获取就绪状态码

    第一步:请求初始化(open都没有调用)。 就绪状态码表示为0

    第二步:请求已经建立,但是还没有发送。 就绪状态码表示为1

    第三步:请求已经发送,准备处理。 就绪状态码表示为2

    第四步:请求处理,获取内容的基本信息。 就绪状态码表示为3

    第五步:请求响应全部完成,响应服务器的一切内容。 就绪状态码表示为4

    监听事件

    监听就绪状态码是否完成,一旦完成,立刻获取数据--onreadystatechange

    xhr.readyState 获取就绪状态码

    ajax.status 获取网页状态码

    xhr.responseText : 获取接口返回的数据。类型是字符串。

    传输数据给后端

    get

    ajax.open('get', 'http://localhost/NZ_1903/Day 23/getdata.php?' + 'name=zhangsan&age=8' , true);
    ajax.send();

    post方式传输数据--通过ajax下面的send方法进行传输 + 请求头

    ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//设置请求头,post传输必须要设置。

    ajax.send('a=100&b=200&c=300');

    什么叫浏览器的同源策略

    同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web页面的域相同。

    同源策略是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

    哪些情况会产生跨域

    域名不同

    端口不同

    http,https协议不同

    域名和域名对应的ip地址也会产生跨域

    如何解决跨域问题

    后端代理--后端不存在跨域

    header("Access-Control-Allow-Origin:*")

    header("Access-Control-Request-Methods:GET, POST")

    上面两个可不写

    $joke = file_get_contents('http://www.kuitao8.com/api/joke');

    json

    cors

  • 相关阅读:
    WPF之感触
    C# WinForm 给DataTable中指定位置添加列
    MyEclipse 8.6 download 官方下载地址
    将博客搬至CSDN
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
  • 原文地址:https://www.cnblogs.com/zlf1914/p/12801708.html
Copyright © 2011-2022 走看看