Home > Developer > Ajax

Javascriptmvc tutorial-12. Ajax applications that can be crawled and searched by Google (searchable Ajax Apps)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In today's tutorial, we will create a small plug-in that will be used to listen to the hash changes in the browser address bar and then update the page content. We will also demonstrate how to make Ajax applications crawled and searched by Google. You can go to https://developers.google.com/webmasters/ajax-crawling? Hl = ZH-CN learn more.

　　

　　Install

Download and install the latest version of javascriptmvc (the so-called installation is to extract the compressed package in a directory, and then create an IIS Site or virtual directory for this directory ). Open the command line and point to the javascriptmvc root directory. Use the following command to create an application:

js jquery/generate/app ajaxy

My local running effect:

　　

　　Code

Under the generated ajaxy folder, you will findajaxy.htmlAndAjaxy. js. We will add the following code for the ajaxy.html file, so that when you click the link to the page, make sure that ajaxy. js has been loaded.

<!DOCTYPE HTML>

We noticed that the page contains <meta name = "fragment" content = "! "> Note: googlegoogleuses ajaxy.html as the Ajax content page. Next, add the corresponding file for the page link:


Ajaxy/fixtures/articles.html


Ajaxy/fixtures/images.html


Ajaxy/fixtures/videos.html


The following is the content of the ajaxy. js file:


Steal ('jquery/controller', 'jquery/event/hashchang', 'steal/html', function () {$. controller ('ajaxy', {init: function () {This. updatecontent ()}, "{window} hashchange": function () {This. updatecontent () ;}, updatecontent: function () {var hash = Window. location. hash. substr (2), url = "fixtures/" + (hash | "videos") + ". html "; // delay steal.html. wait (); $. get (URL, {}, this. callback ('replace content'), "text")}, replacecontent: function (HTML) {this.element.html (HTML); // determine whether the page is to be crawled by steal.html. ready () ;}}) $ ('# content '). ajaxy ();});


When hashchange ("{window} hashchange"When an event occurs, ajaxy uses the window. Location. Hash Value to request content from the fixtures folder. After obtaining the content, replace it with the HTML (this.element.html(...)). Ajaxy uses updatecontent to load content during page initialization.


 


　　Crawling and scraping)


　　We use the following command to crawl the site and generate HTML pages that can be crawled and searched by Google.


js ajaxy/scripts/crawl.js


The preceding command completes the following operations:


    
    
 
     
  1. Open the page in the browser.
    2. 
 
     
  2. Wait, know that the content is ready.
    3. 
 
     
  3. Crawl the page content.
    4. 
 
     
  4. Input content to another file.
    5. 
 
     
  5. Add any "#!" To make it indexed.
    6. 
 
     
  6. Modifywindow.location.hashTo next page
    7. 
 
     
  7. Go to #2 and repeat until all pages are loaded.
    8. 

    


 


　　Pausing the HTML scraping)


　　By default, when the page script is loaded or the window. Location. Hash is changed, the page content is destroyed and crawled. Because the ajaxrequest is abnormal, steal.html must be crawled after the content is obtained. Before Ajax requests, we need ajaxy to call wait:


steal.html.wait();


After the page preparation is complete, ajaxy calls ready:


steal.html.ready();


 


　　Let Google crawl your website


You can go to the Ajax crawler API to learn more. When Google crawls your site, it sends a request with "_ escaped_fragment =. When this parameter is found on your site, it directs Google to access the generated page. For example, Google crawler request http://mysite.com? _ Escaped_fragment = Val, he will try to crawl the http://mysite.com #! Val, you need to guide him to http://mysite.com/html/val.html. Yes, everything is that simple.


 


　　Phantom for advanced pages)


Generally, the crawling script uses envjs to open your page and generate static snapshots. However, he sometimes fails. In this case, you need to use phantomjs (headless WebKit) to generate a snapshot, which is better.


　　


How to run:


1. Run the command to install the SDK. Here you can learn more.


2. Open scripts/Crawl. js and modify the second parameter of steal.html. Crawl. It is a browser configuration item, for example:


steal('steal/html', function(){ steal.html.crawl("ajaxy/ajaxy.html", { 　　　　out: 'ajaxy/out', 　　　　browser: 'phantomjs' 　　}) })


 


 


Javascriptmvc tutorial directory

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
ajax echo ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout
Related Article
The difference between traditional web development patterns a...
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More