Ajax

最新推荐文章于 2023-06-07 12:09:48 发布
最新推荐文章于 2023-06-07 12:09:48 发布
阅读量214 收藏
点赞数
分类专栏： js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywy502/article/details/104032874
版权

在这里插入图片描述

创建Ajax对象
Ajax的核心就是js的XMLHttpRequest对象
IE6/7/8

var request=new ActiveXObject(“Microsoft.XMLHTTP”);
var request=new ActiveXObject(“Msxml2.XMLHTTP”);
var request=new ActiveXObject(“Msxml2.XMLHTTP.3.0”);
var request=new ActiveXObject(“Msxml2.XMLHTTP.6.0”);
var req=’’;
if(window.XMLHttpRequest)
{
Req=new XMLHttpRequest();

}
else
{
   Req=new ActiveXObject(“Msxml2.HTTP”);//四种都可以
}

这里用php与ajax进行数据传输
Php

//设置编码格式
<?php
header('content-type:text/html;charset=utf-8');
$name='wujing';//定义
echo '<br>';//换行
$ip=3.14;
$male=false;
//选择语句
$day='礼拜一'；
switch（$day）{
    case '礼拜一'：
    break;
}
//循环语句
for($i=0;$i<10;$i++){

}
//定义数组
$food=array('a,c,f,b');
print_r($food);//输出数组内容
count($food)//获取数组长度
//数组遍历
for($i=0；$i<count($food);$i++){
    echo $food[$i];
}
//另一种数组-索引数组
$person=array('name'=>'eujing','film'=>'jdfd');
echo $person['name'];
//完整输出数组
print_r($person);
//遍历
foreach($person as $Key=>$value){
    echo $Key.'.....'.$value.'<br>';
}
//二维数组
$arr=array(
    array('name'=>'dsf','film'=>'sfds'),
    array('name'=>'dsf','film'=>'sfds'),
    array('name'=>'dsf','film'=>'sfds'),
)
echo '<h2>明星:<span style="color:orange;font-size:14px;>'.$arr[$i]['name'].'</span>出演了:'.$arr[$i['film'].'好朋友是：'.$arr[$i]['frient'].'<br></h2>';
//动态的写在里边 静态的写在外边
?>
<a href="#">dhgfhj</a>
<p>写在php标签之外的代码 不会执行 原封不动的返回浏览器</p>

<style>

</style>

Form表单通过get 提交的数据本质上在url后拼接上name=valve
?key=value
Php可以拆分多个,<?php ?>之间可以插入html
有form表单时需要用name属性
XMLHttpRequest对象回调函数->Mozilla开发者网络搜（XMLHttpRequest）搜onload
onreadystatechange//触发次数多，状态改变时会触发

xml缺点

  1. 传输数据量大
  2. 解析略微有点复杂
    获取网络数据
    1， 找到使用AJAX的网站（基本上都有）
    2， 如何查看网站使用的AJAX请求
    开发者界面
    Network选XHR选项
    3， 找到数据之后如何复制自己玩
    如果数据需要JSON格式化下载PE助手里的JSON格式化，或直接在百度搜JSON格式化在线格式（校验）
    4， 将数据放入到data/info.json中
    在线jsonp接口测试 asilu.com
    Success请求成功后会触发
    如果出现 服务器告诉浏览器返回的类型 跟Jquery内部实际转化的类型不匹配 会无法触发
    Error当请求出现问题时会触发这个函数
    模板引擎案例
    进入网站 什么值得买-好文-原创-network-json格式化
    $(.‘sds’ li :eq(3) a’) ul的第四个li标签
    $(‘tbody).on(‘click’,’.class’,function(){ })
    Mdn开发者网络
    PHP
header('content-type:text/html;charset=utf-8');
    include './data.php';
window.location.herf='http://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=西兰花炒蛋';

字符串用.连接
Php可以入到html中的任意地方
可多个php连接
echo 输出字符串
print_r 输数据
JSON

//json是一种数据格式
    //属性名，属性值必须是双引号
    //跟编程语言无关
    //JSON的载体是字符串
    //基本上所有编程语言支持JSON
    //优点1：语法简洁，所有语言都提供方法解析JSON
    var JSONObject='{"name":"刘亦菲","skill":"失忆"}';
    //转化为对象
    var obj=JSON.parse(JSONObject);
    //JSON的写法---用来表示数组
    var JSONarr='["绿色的蔬菜","大蒜"]';
    //转化为数组对象
    var arr=JSON.parse(JSONarr);
    console.log(arr[2]);
    //JSON的写法--对象数组
    var JSONobjarr='{"name":"彭林","skill":"约跑","runfriends":["周林林","林立群","飞哥"]}';
    var objarr=JSON.parse(JSONobjarr);
//最外面若为双引号，则与里面的相矛盾

Php

<?php
header('content-type:application/json;charset=utf-8');
echo file_get_contents('data/person.json');
sleep(1);
?>

Xml

<?xml version="1.0" encoding="UTF-8"?>
<person>
<skill>擅长打斗地主</skill>
<name>成思城</name>
</person>

Php

<?php
header('content-type:text/xml;charset=utf-8');
echo file_get_contents('data/person.xml');
sleep(1);
?>

Json可以不设置header xml必须设置header 若后台没有设置可以在ajax中设置dataType:’json’;
Json 需要用parse将字符串转化为对象，而xml的数据用xhr.responseXML传回，其它用xhr.responseText

Jsonp

<!--
    同源：
     http://127.0.0.1/2017-8-17/09.waterFall_ajax/
     http://127.0.0.1/2017-8-17/09.waterFall_ajax/api/waterFall.php
     协议名：http
     地址一样（ip地址）
     默认端口：80
     上述三个条件都相同就是同源
     三个条件不都相同为不同源
     不同源的网站发请求就是跨域
     目前解决跨域的两个方式
     cors:cross origin resourse sharing (html5才支持 php中加header('Access-Control-Allow-Origin: *');由服务器同意)
     JSONP:src可以 JSONP用的就是src
-->

非ajax

  1. 表单get
	<form action="./getdata.php">
       <input type="text"name="whero"placehorder="请输入你喜欢的英雄">
       <input type="submit">
  </form>

Php

header('content-type:text/html;charset=utf-8');

2.表单post

 <!--表单元素提交的数据  
    提交多条数据 xxx.php?key=value&key2=value2
	    POST Array ( [food] => YUI [dotype] => JKLK )
	    post可以传输文件
	    -->
	 
	  <form action="./qq.php"method="post">
	      <input name="food"type="text"placeholder="请输入你的名字">
	      <input name="dotype"type="password"placeholder="请输入你的密码">
	      <input type="submit"value="提交">
	  </form>
  1. 表单上传文件
	<!--上传文件的编码类型enctype-->
	   <form action="./postfile.php"method="post"enctype="multipart/form-data">
	    <input type="file"name="icon">
	    <input type="submit">

Php

print_r($_FILES);
Array ( 
    [mypic] => Array (
         [name] => blsy.jpg 
         [type] => image/jpeg 
         [tmp_name] => C:\Users\asus\AppData\Local\Temp\php75F0.tmp 
         [error] => 0 
         [size] => 20286
      ) 
   )
*/

sleep(2);
move_uploaded_file($_FILES['icon']['tmp_name'],'./files/'.$_FILES['icon']['name']);

ajax 请求
1.normal-ajax-get

<script>
        //绑定点击事件
        document.querySelector('input').onclick=function(){
            //创建对象 异步对象
            var xhr=new XMLHttpRequest();
            //请求行
            //参数三 是否使用异步 false 不使用
            xhr.open('get','xxx.php?name=jack&skill=painting',ture);
            //注册回调函数 响应回来后执行函数
            //触发次数多，readyState状态码是4时采取获取数据,能兼容所有浏览器
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&status==200)  
                {

                console.log(xhr.responseText);
                console.log('sfs');
                }
            }
            //请求头
            //参数1 键名
            //参数2 值
           //xhr.setRequestHeader('a','2');
            //请求主体 发送
            xhr.send(null);
        }
    </script>
  1. normal-ajax-post
<script>
        //绑定点击事件
        document.querySelector('input').onclick=function(){
      
            //创建对象 异步对象
            var xhr=new XMLHttpRequest();
            //请求行

            xhr.open('post','postdata.php');
            //注册回调函数 响应回来后执行函数
            xhr.onload=function(){
                console.log('xhr.responseText');
            
            }
            //请求头
            
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            //参数1 键名
            //参数2 值
           //xhr.setRequestHeader('a','2');
            //请求主体 发送
            xhr.send('name=西兰花&friend=鸡蛋');
        }
    </script>

Post传数据要设置请求头
3.jQuery-ajax/get/post/ajax-extent

<script>
    $('.get').click(function(){
        //$.get('../00.backdata/01.backsend.php','name=rose&husband=robot',function(data){
         //   alert(data);
       // })
        //可以传对象，将对象拆成键值对补在url后
        $.get('../00.backdata/01.backsend.php',{name:'rose',husband:'robot'},function(data){
            alert(data);
        })
    })
    $('.post').click(function(){
        //$.get('../00.backdata/01.backsend.php','name=rose&husband=robot',function(data){
         //   alert(data);
       // })
        //可以传对象，将对象拆成键值对补在url后
        $.post('../00.backdata/01.backsend.php',{name:'rose',husband:'robot'},function(data){
            alert(data);
        })
    })
    $('.ajax').click(function(){
        //$.get('../00.backdata/01.backsend.php','name=rose&husband=robot',function(data){
         //   alert(data);
       // })
        //可以传对象，将对象拆成键值对补在url后
        $.ajax({
            url:'../00.backdata/01.backsend.php',
           // type:'get',
           // data:'dfs',
            success:function(data){
              console.log(data)
            }
        })
    })
    $('.ajax_extend').click(function(){
        //$.get('../00.backdata/01.backsend.php','name=rose&husband=robot',function(data){
         //   alert(data);
       // })
        //可以传对象，将对象拆成键值对补在url后,若拿xml可以不写data
        $.ajax({
            url:'../00.backdata/backXML.php',
           // type:'get',如果用get可以不写type
           data:{
               name:'喜羊羊',
               skill:'卖萌'
           },
            success:function(data){
              console.log(data)
            },
            //形参可以改名字，但用默认的较好
            //参数1：异步对象，参数2：错误信息，参数3：错在哪里
            error:function(XMLHttpRequest,textStatus,errorThrown){
console.log('错误了哟');
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
            },
            //请求完成就触发
            complete:function(){

            }
            
            
        })
    })
</script>

4.跨域-cors

cors:cross origin resourse sharing (html5才支持 php中加header('Access-Control-Allow-Origin: *');由服务器同意)

5.跨域-jsonp-1
在ajax中加入dataType:‘jsonp’;
6. 跨域-jsonp-2

7.	<script>
8.	      function doSomething(data){
9.	           console.log(data);
10.	      }
11.	  </script>  
12.	  
13.	  
14.	  <script src="http://192.168.70.78/2017-8-17/12.JSONP/backData.php?callback=doSomething">
15.	      
16.	  </script>

Php

<?php
$methodName=$_GET['callback'];
echo $methodName.'({"name":"jack","food":"西兰花"})';
?>

8 ajax-文件

18.	<body>
19.	    <h2>XML2.0</h2>
20.	    <!--
21.	        技术在不停的升级，XMLHttpRequest
22.	        1.快速格式化表单数据
23.	        2.ajax上传文件
24.	        3.上传进度监控
25.	    -->
26.	    <form action="">
27.	        <input type="text"name="name"placeholder="用户名">
28.	        <input type="text"name="email"placeholder="邮箱">
29.	        <input type="text"name="address"placeholder="地址">
30.	        <input type="file"name="icon">
31.	    </form>
32.	    <input type="button"value="ajax发送文件">
33.	    <div class="prograss">
34.	<div class="step">
35.	
36.	</div>
37.	    </div>
38.	</body>
39.	</html>
40.	<script>
41.	    document.querySelector('input[type=button]').onclick=function(){
42.	         //创建对象 异步对象
43.	         var xhr=new XMLHttpRequest();
44.	            //请求行
45.	            xhr.open('post','backData.php');
46.	            //注册回调函数 响应回来后执行函数
47.	            xhr.onreadystatechange=function(){
48.	                if(xhr.readyState==4&&xhr.status==200)  
49.	                {
50.	
51.	                }
52.	            }
53.	            //格式化表单
54.	            //由于兼容性不太好，用的并不多
55.	            var sendData=new FormData(document.querySelector('form'));
56.	            //上传回调函数
57.	            xhr.upload.onprogress=function(event){
58.	               var percent=event.loaded/event.total*100+'%';
59.	               document.querySelector('.step').style.width=percent;
60.	            }
61.	            //请求头
62.	            //参数1 键名
63.	            //参数2 值
64.	           //xhr.setRequestHeader('a','2');
65.	            //请求主体 发送
66.	            xhr.send(sendData);
67.	    }
68.	</script>

Php

<?php
/*Array
(
    [name] => 12
    [email] => 3233
    [address] => 445
)
Array
(
    [icon] => Array
        (
            [name] => 01(1).png
            [type] => image/png
            [tmp_name] => C:\Users\asus\AppData\Local\Temp\php923E.tmp
            [error] => 0
            [size] => 17112
        )

)*/

//print_r($_POST);
print_r($_FILES);
move_uploaded_file($_FILES['icon']['tmp_name'],'./files/'.$_FILES['icon']['name']);
?>

Masonry(瀑布流)

<script>
    $('.grid').masonry({
        itemSelector:'.grid-item',
        columnWidth:200
    });
</script>

My-template（模板引擎）

function my_template(id,data){


var str=document.querySelector('#'+id).innerHTML;
var reg=/{{(\w+)}}/;
var result=reg.exec(str);
while(result){
    str=str.replace(result[0],data[result[1]]);
    result=reg.exec(str);
}
return str;
}

Art-template语法

<script id='ifTemplate'type='text/html'>
 <ul>
     {{if male=='女'}}
     <li>欢迎你{{name}}女士
         <ol>
            <li>这是最新款的包包</li>
            <li>这是最新款的口红</li>
            <li>没想到，你竟然是{{skill}}</li>
         </ol>
    </li>
    {{else if male=='男'}}
     <li>欢迎您{{name}}先生
         <ol>
             <li>这是最新款的拖拉机</li>
             <li>讨厌，才来找人家</li>
             <li>没想到，你竟然稍长{{skill}}</li>
         </ol>
     </li>
    {{/if}}
 </ul>
</script>
<script>
    var person1={
        male:'女',
        name:'郑爽',
        skill:'身材好'
    };
    var person2={
        male:'男',
        name:'张翰',
        skill:'这片鱼塘我承包了'
    };
    console.log(template('ifTemplate',person1));
</script>
<!--原文输出-->
<script id="norTemplate"type='text/html'>
<ul>
    <li>{{name}}</li>
    <li>{{skill}}</li>
    <li>{{@info}}</li>
</ul>
</script>
<script>
    var person={
        name:'犬夜叉',
        skill:'变犬',
        info：'<a herf="https://baike.baidu.com/item/%E7%8A%AC%E5%A4%9C%E5%8F%89/26878?fr=aladdin">犬夜叉</a>'
    };
    document.body.innerHTML=template('norTemplate',person);
</script>
<!--原文输出-->
<script id="eachTemplate"type="text/html">
<ul>
<li>{{name}}</li>
<li>兄弟们
{{each brother}}
<li>{{$value}}</li>
{{/each}}
</li>
<li>
<ol>
{{each family}}
<li>{{$value.name}}</li>---<li>{{$value.skill}}</li>
{{/each}}
</ol>
</li>
</ul>
</script>
<script>
var person={
    name:'大娃',
    brother:[
        '二娃',
        '三娃',
        '水娃',
        '火娃'
    
    ],
    family:[
        {name:'爷爷',skill:'被抓'},
        {name:'穿山甲',skill:'到底说了什么'},
        {name:'小蝴蝶',skill:'撩'},
    ]
}

其它

$(function(){
       $('.name').blur(function(){
           //为了在代码中使用this 不出现问题
           var $this=$(this);
           $.ajax({
               url:'_api/checkName.php',
               data:{
                   name:$this.val()
               },
               success:function(data){
                   console.log(data);
                   $('.tips').find('p').html(data).fadeIn(1000).delay(1000).fadeOut(1000);
               }
           })
       })

```
正义的小豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax报502错误,ajax服务器返回502
weixin_32729025的博客
08-06 1387
ajax服务器返回502 内容精选换一换华为云帮助中心，为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档，帮助您快速上手使用华为云服务。正常返回值说明200请求成功。202任务提交成功，当前系统繁忙，下发的任务会延迟处理。204任务提交成功。异常返回值说明300 multiple choices被请求的资源存在多个可供选择的响应。400 Bad ...
ajax响应状态码--前端必须要知道的
m0_62877814的博客
12-11 1520
前端必会的发ajax请求状态码
ajax 502 bad gateway,php的phalcon框架502 Bad Gateway错误，nginx环境
weixin_35676939的博客
08-06 212
如果是简单的 echo 'hello world'; 的话可以正常访问，使用phalcon的就不行，不知道怎么回事，求助。php-fpm.log总是出现下面这样的提示：[16-May-2015 19:08:58] NOTICE: [pool www] child 28875 started[16-May-2015 19:09:00] WARNING: [pool www] child 28870 ...
Ajax的应用
wk3510的博客
09-08 652
1.json：一个对象表示方式，用来在系统界面层和控制器之间的数据传递，或者多个系统的数据传递两种类型：A.对象：{属性：属性值，属性：属性值数字、boolean不需要加引号，字符串需要加引号B.数组：[{}，{}]2. 如果响应的json,最好是在Servlet里添加响应类型为如下。
AJAX status状态码
wwf1225的博客
12-04 253
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 xmlhttp.read...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
ajax方法post提交大量汉字，有的人502，有的没事，求原因和解决办法
weixin_46055810的博客
11-05 455
ajax方法post提交大量汉字，有的人502，有的没事，求原因和解决办法
ajax常用状态码
最新发布
加金开发
06-07 869
【代码】ajax常用状态码。
http状态码
weixin_34203426的博客
05-24 1227
从网上找资料整理的的http状态码 200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。 201（已创建） 请求成功且服务器已创建了新的资源。 202（已接受） 服务器已接受了请求，但尚未对其进行处理。 203（非授权信息） 服务器已成功处理了请求，但返回了可能来自另一来源的信息。 204（无内容） 服务器成功处理了请求，但未返回任...
ajax的状态详解，错误信息
qq_51547290的博客
02-20 632
ajax状态详解，网页错误状态
http状态码200,300,404详细说明
weixin_42878388的博客
08-28 1150
1开头的http状态码 表示临时响应并需要请求者继续执行操作的状态代码。 100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。 2开头的http状态码 表示请求成功 200 成功处理了请求，一般情况下都是返回此状态码； 201 请求成功并且服务器创...
Docker Compose 一键 ELK 部署
大漠知秋的加油站
01-07 5431
安装   Filebeat 已经完全替代了 Logstash-Forwarder 成为新一代的日志采集器，因为它更加轻量、安全。基于 Filebeat + ELK 的部署方案架构图如下：         软件版本： 服务 版本 说明 CentOS 7.6 Docker 18.09.5 Docker Compose 1.25.0 ELK 7.5.1 Fileb...
ajax.readyState与ajax.status一览
aoliyi3569的博客
09-15 224
ajax.readyState 0 －（未初始化）还没有调用send()方法 1 －（载入）已调用send()方法，正在发送请求 2 －（载入完成）send()方法执行完成，已经接收到全部响应内容 3 －（交互）正在解析响应内容 4 －（完成）响应内容解析完成，可以在客户端调用了 ajax.status（HTTP 状态码） ...
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值